fix: FRM-1819 add custom detection element addon flag

opengovsg · Sep 18, 2024 · c4803dd · c4803dd
1 parent f8514e4
commit c4803dd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -68,3 +68,7 @@ jobs:
           skip: dependabot/**
           # Only run when the frontend directory has changes
           untraced: '!(frontend)/**'
+          # temp debug options
+          # debug: true
+          diagnosticsFile: true
+          # logFile: true
diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
@@ -33,6 +33,10 @@ export interface InputProps extends ChakraInputProps {
    * Whether to prevent default on user pressing the 'Enter' key.
    */
   preventDefaultOnEnter?: boolean
+  /**
+   * Whether there's an input right element. Used to provide additional padding
+   */
+  hasInputRightElement?: boolean
 }
 
 export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
@@ -45,6 +49,7 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
     'isPrefilled',
     'isPrefillLocked',
     'preventDefaultOnEnter',
+    'hasInputRightElement',
   ])
 
   const preventDefault = useMemo(
@@ -102,7 +107,11 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
           ref={ref}
           {...preventDefault}
           {...inputProps}
-          sx={props.sx ?? inputStyles.field}
+          sx={merge(
+            props.hasInputRightElement ? { pr: '2.75rem' } : {},
+            inputStyles.field,
+            props.sx,
+          )}
         />
       )
     }

diff --git a/...ign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx b/...ign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx
@@ -248,6 +248,7 @@ export const EditShortText = ({ field }: EditShortTextProps): JSX.Element => {
                   field._id ??
                   'Field ID will be generated after this field is saved'
                 }
+                hasInputRightElement={Boolean(field._id)}
               />
               {field._id ? (
                 <InputRightElement>

diff --git a/frontend/src/features/admin-form/share/ShareFormModal.tsx b/frontend/src/features/admin-form/share/ShareFormModal.tsx
@@ -279,6 +279,7 @@ export const ShareFormModal = ({
               data-chromatic="ignore"
               isReadOnly
               value={shareLink}
+              hasInputRightElement={Boolean(formId)}
             />
             {formId ? (
               <InputRightElement>
@@ -314,6 +315,7 @@ export const ShareFormModal = ({
             isReadOnly
             isDisabled={isFormPrivate}
             value={`${templateLink}`}
+            hasInputRightElement={Boolean(formId)}
           />
           {formId ? (
             <InputRightElement>
@@ -412,6 +414,7 @@ export const ShareFormModal = ({
                                 setGoLinkHelperText(undefined)
                               }}
                               isReadOnly={goLinkSaved}
+                              hasInputRightElement={goLinkSaved}
                             />
                             {goLinkSaved ? (
                               <InputRightElement>