Skip to content

Commit 81aa381

Browse files
ViczeiViczei
committed
fix(declaration): right-align numeric inputs (#3255)
1 parent 19fcd32 commit 81aa381

6 files changed

Lines changed: 24 additions & 19 deletions

File tree

‎packages/app/src/modules/declaration-remuneration/shared/PayGapTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export function PayGapTable({
8585
<span className={styles.inputWithUnit}>
8686
<input
8787
aria-label={`${row.label} — Femmes`}
88-
className="fr-input"
88+
className={`fr-input ${common.numericInput}`}
8989
disabled={disabled}
9090
inputMode="decimal"
9191
onChange={(e) =>
@@ -101,7 +101,7 @@ export function PayGapTable({
101101
<span className={styles.inputWithUnit}>
102102
<input
103103
aria-label={`${row.label} — Hommes`}
104-
className="fr-input"
104+
className={`fr-input ${common.numericInput}`}
105105
disabled={disabled}
106106
inputMode="decimal"
107107
onChange={(e) =>

‎packages/app/src/modules/declaration-remuneration/shared/common.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,7 @@
5656
align-items: baseline;
5757
gap: 0.5rem;
5858
}
59+
60+
.numericInput {
61+
text-align: right;
62+
}

‎packages/app/src/modules/declaration-remuneration/steps/Step1Workforce.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ export function Step1Workforce({
166166
<td>
167167
<input
168168
aria-label="Nombre de femmes"
169-
className="fr-input"
169+
className={`fr-input ${common.numericInput}`}
170170
disabled={isImpersonating}
171171
inputMode="numeric"
172172
onChange={handleWomenChange}
@@ -178,7 +178,7 @@ export function Step1Workforce({
178178
<td>
179179
<input
180180
aria-label="Nombre d'hommes"
181-
className="fr-input"
181+
className={`fr-input ${common.numericInput}`}
182182
disabled={isImpersonating}
183183
inputMode="numeric"
184184
onChange={handleMenChange}

‎packages/app/src/modules/declaration-remuneration/steps/Step3VariablePay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ export function Step3VariablePay({
234234
<td>
235235
<input
236236
aria-label="Bénéficiaires femmes"
237-
className="fr-input"
237+
className={`fr-input ${common.numericInput}`}
238238
disabled={isImpersonating}
239239
inputMode="numeric"
240240
onChange={(e) =>
@@ -265,7 +265,7 @@ export function Step3VariablePay({
265265
<td>
266266
<input
267267
aria-label="Bénéficiaires hommes"
268-
className="fr-input"
268+
className={`fr-input ${common.numericInput}`}
269269
disabled={isImpersonating}
270270
inputMode="numeric"
271271
onChange={(e) =>

‎packages/app/src/modules/declaration-remuneration/steps/step4/QuartileTable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import common from "~/modules/declaration-remuneration/shared/common.module.scss";
34
import { QUARTILE_NAMES } from "~/modules/declaration-remuneration/shared/constants";
45
import type { QuartileData } from "~/modules/declaration-remuneration/types";
56
import { computePercentage, displayDecimal } from "~/modules/domain";
@@ -90,7 +91,7 @@ export function QuartileTable({
9091
<span className={stepStyles.inputWithUnit}>
9192
<input
9293
aria-label={`Rémunération brute ${QUARTILE_NAMES[i]}`}
93-
className="fr-input"
94+
className={`fr-input ${common.numericInput}`}
9495
disabled={disabled}
9596
inputMode="decimal"
9697
onChange={(e) =>
@@ -116,7 +117,7 @@ export function QuartileTable({
116117
<td key={QUARTILE_NAMES[i]}>
117118
<input
118119
aria-label={`Nombre de femmes ${QUARTILE_NAMES[i]}`}
119-
className="fr-input"
120+
className={`fr-input ${common.numericInput}`}
120121
disabled={disabled}
121122
inputMode="numeric"
122123
onChange={(e) =>
@@ -166,7 +167,7 @@ export function QuartileTable({
166167
<td key={QUARTILE_NAMES[i]}>
167168
<input
168169
aria-label={`Nombre d'hommes ${QUARTILE_NAMES[i]}`}
169-
className="fr-input"
170+
className={`fr-input ${common.numericInput}`}
170171
disabled={disabled}
171172
inputMode="numeric"
172173
onChange={(e) =>

‎packages/app/src/modules/declaration-remuneration/steps/step5/CategoryDataTable.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function CategoryDataTable({
9494
<div className={stepStyles.inputCell}>
9595
<input
9696
aria-label={`Effectif femmes, catégorie ${catIndex + 1}`}
97-
className={`fr-input ${stepStyles.compactInput}`}
97+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
9898
disabled={disabled}
9999
id={id("women-count")}
100100
inputMode="numeric"
@@ -110,7 +110,7 @@ export function CategoryDataTable({
110110
<div className={stepStyles.inputCell}>
111111
<input
112112
aria-label={`Effectif hommes, catégorie ${catIndex + 1}`}
113-
className={`fr-input ${stepStyles.compactInput}`}
113+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
114114
disabled={disabled}
115115
id={id("men-count")}
116116
inputMode="numeric"
@@ -137,7 +137,7 @@ export function CategoryDataTable({
137137
<div className={stepStyles.inputCell}>
138138
<input
139139
aria-label={`Salaire de base annuel femmes, catégorie ${catIndex + 1}`}
140-
className={`fr-input ${stepStyles.compactInput}`}
140+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
141141
disabled={disabled}
142142
id={id("annual-base-women")}
143143
inputMode="decimal"
@@ -152,7 +152,7 @@ export function CategoryDataTable({
152152
<div className={stepStyles.inputCell}>
153153
<input
154154
aria-label={`Salaire de base annuel hommes, catégorie ${catIndex + 1}`}
155-
className={`fr-input ${stepStyles.compactInput}`}
155+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
156156
disabled={disabled}
157157
id={id("annual-base-men")}
158158
inputMode="decimal"
@@ -179,7 +179,7 @@ export function CategoryDataTable({
179179
<div className={stepStyles.inputCell}>
180180
<input
181181
aria-label={`Composantes variables annuelles femmes, catégorie ${catIndex + 1}`}
182-
className={`fr-input ${stepStyles.compactInput}`}
182+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
183183
disabled={disabled}
184184
id={id("annual-variable-women")}
185185
inputMode="decimal"
@@ -194,7 +194,7 @@ export function CategoryDataTable({
194194
<div className={stepStyles.inputCell}>
195195
<input
196196
aria-label={`Composantes variables annuelles hommes, catégorie ${catIndex + 1}`}
197-
className={`fr-input ${stepStyles.compactInput}`}
197+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
198198
disabled={disabled}
199199
id={id("annual-variable-men")}
200200
inputMode="decimal"
@@ -238,7 +238,7 @@ export function CategoryDataTable({
238238
<div className={stepStyles.inputCell}>
239239
<input
240240
aria-label={`Salaire de base horaire femmes, catégorie ${catIndex + 1}`}
241-
className={`fr-input ${stepStyles.compactInput}`}
241+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
242242
disabled={disabled}
243243
id={id("hourly-base-women")}
244244
inputMode="decimal"
@@ -253,7 +253,7 @@ export function CategoryDataTable({
253253
<div className={stepStyles.inputCell}>
254254
<input
255255
aria-label={`Salaire de base horaire hommes, catégorie ${catIndex + 1}`}
256-
className={`fr-input ${stepStyles.compactInput}`}
256+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
257257
disabled={disabled}
258258
id={id("hourly-base-men")}
259259
inputMode="decimal"
@@ -280,7 +280,7 @@ export function CategoryDataTable({
280280
<div className={stepStyles.inputCell}>
281281
<input
282282
aria-label={`Composantes variables horaires femmes, catégorie ${catIndex + 1}`}
283-
className={`fr-input ${stepStyles.compactInput}`}
283+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
284284
disabled={disabled}
285285
id={id("hourly-variable-women")}
286286
inputMode="decimal"
@@ -295,7 +295,7 @@ export function CategoryDataTable({
295295
<div className={stepStyles.inputCell}>
296296
<input
297297
aria-label={`Composantes variables horaires hommes, catégorie ${catIndex + 1}`}
298-
className={`fr-input ${stepStyles.compactInput}`}
298+
className={`fr-input ${stepStyles.compactInput} ${common.numericInput}`}
299299
disabled={disabled}
300300
id={id("hourly-variable-men")}
301301
inputMode="decimal"

0 commit comments

Comments
 (0)