Merge pull request #2113 from IFRCGo/fix/per-prioritization-form-checkbox

frozenhelium · web-flow · commit 6732ef670b65 · 2025-11-28T15:44:38.000+05:45
Fix PER prioritization form checkbox
diff --git a/app/src/components/Navbar/CountryDropdown/index.tsx b/app/src/components/Navbar/CountryDropdown/index.tsx
@@ -176,6 +176,7 @@ function CountryDropdown() {
                                             icons={<SearchLineIcon />}
                                         />
                                     )}
+                                    withPadding
                                 >
                                     <ListView
                                         layout="grid"
diff --git a/app/src/components/Navbar/CountryDropdown/styles.module.css b/app/src/components/Navbar/CountryDropdown/styles.module.css
@@ -1,15 +1,14 @@
 .dropdown {
     display: flex;
     flex-direction: row;
-    padding: var(--go-ui-spacing-md);
     max-width: 64rem;
     min-height: 16rem;
-    gap: var(--go-ui-spacing-md);
     overflow: auto;
 
     .region-list {
         flex-basis: 10rem;
         flex-shrink: 0;
+        padding: var(--go-ui-spacing-md) 0 0 var(--go-ui-spacing-md);
     }
 
     .region-border {
diff --git a/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx b/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx
@@ -196,7 +196,7 @@ function OperationCard(props: Props) {
                         <ButtonLayout
                             // FIXME: we should use Tag component here
                             textSize="sm"
-                            spacing="2xs"
+                            spacing="3xs"
                             withEllipsizedContent
                             readOnly
                         >
diff --git a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
@@ -49,7 +49,7 @@ interface Props {
     index: number | undefined;
     error: Error<Value> | undefined;
     component: NonNullable<PerFormComponentResponse['results']>[number];
-    onSelectionChange: (checked: boolean, index: number, componentId: number) => void;
+    onSelectionChange: (checked: boolean, index: number | undefined, componentId: number) => void;
     questionResponses: ComponentResponse['question_responses'];
     ratingDisplay?: string | undefined | null;
     readOnly?: boolean;
@@ -144,7 +144,7 @@ function ComponentInput(props: Props) {
     );
 
     const handleCheck = useCallback((checked: boolean, checkIndex: number | undefined) => {
-        if (!readOnly && isDefined(checkIndex)) {
+        if (!readOnly) {
             onSelectionChange(checked, checkIndex, component.id);
         }
     }, [component.id, readOnly, onSelectionChange]);
@@ -167,7 +167,7 @@ function ComponentInput(props: Props) {
             headerIcons={(
                 <Checkbox
                     name={index}
-                    value={isDefined(value)}
+                    value={!!value}
                     onChange={handleCheck}
                     readOnly={readOnly}
                 />
@@ -180,15 +180,16 @@ function ComponentInput(props: Props) {
                         spacing="sm"
                     >
                         <ButtonLayout
-                            spacing="sm"
+                            spacing="2xs"
+                            textSize="sm"
                             readOnly
-                            styleVariant="translucent"
                             // FIXME: use tag component
                         >
                             {ratingDisplay ?? strings.notReviewed}
                         </ButtonLayout>
                         <ButtonLayout
-                            spacing="sm"
+                            spacing="2xs"
+                            textSize="sm"
                             readOnly
                             styleVariant="translucent"
                             // FIXME: use tag component
diff --git a/app/src/views/PerPrioritizationForm/index.tsx b/app/src/views/PerPrioritizationForm/index.tsx
@@ -285,9 +285,9 @@ export function Component() {
     );
 
     const handleSelectionChange = useCallback(
-        (checked: boolean, index: number, componentId: number) => {
+        (checked: boolean, index: number | undefined, componentId: number) => {
             if (!checked) {
-                removeComponentValue(index);
+                removeComponentValue(index!);
                 return;
             }
 
diff --git a/go-api b/go-api
@@ -1 +1 @@
-Subproject commit 596b1f2c24014148879a97cc069a62205dfdc24d
+Subproject commit 14be734d91ca8e26e2727a9814935a85750d51ec
diff --git a/packages/ui/src/components/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
@@ -84,6 +84,7 @@ function TabLayout(props: Props) {
                 className,
             )}
             spacingOffset={spacingOffset}
+            withAdditionalInlinePadding={styleVariant === 'pill'}
         >
             {children}
             <span className={styles.visualFeedback} />

Original file line number	Diff line number	Diff line change
`@@ -176,6 +176,7 @@ function CountryDropdown() {`
`176`	`176`	`icons={<SearchLineIcon />}`
`177`	`177`	`/>`
`178`	`178`	`)}`
	`179`	`+ withPadding`
`179`	`180`	`>`
`180`	`181`	`<ListView`
`181`	`182`	`layout="grid"`
Original file line number	Diff line number	Diff line change
`@@ -196,7 +196,7 @@ function OperationCard(props: Props) {`
`196`	`196`	`<ButtonLayout`
`197`	`197`	`// FIXME: we should use Tag component here`
`198`	`198`	`textSize="sm"`
`199`		`- spacing="2xs"`
	`199`	`+ spacing="3xs"`
`200`	`200`	`withEllipsizedContent`
`201`	`201`	`readOnly`
`202`	`202`	`>`
Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@ function TabLayout(props: Props) {`
`84`	`84`	`className,`
`85`	`85`	`)}`
`86`	`86`	`spacingOffset={spacingOffset}`
	`87`	`+ withAdditionalInlinePadding={styleVariant === 'pill'}`
`87`	`88`	`>`
`88`	`89`	`{children}`
`89`	`90`	`<span className={styles.visualFeedback} />`