From 83518f82b78c5116cbd3c205826dcd576d745969 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna <98796547+Ajeyakrishna-k@users.noreply.github.com> Date: Thu, 2 Nov 2023 00:47:56 +0530 Subject: [PATCH] Fixes css of assignee suggestions input (#972) * fix : improves styles of assignee suggestion input * test : updates test for action form * fix : updates failing test * Chore : update placeholder text of input * chore : updates placeholder text of action form in tests * chore : uses variable for css color * chore : adds slight gap between input and label --- .../Unit/Components/Issues/ActionForm.test.tsx | 8 +++++--- src/components/issues/ActionForm.tsx | 16 +++++++++++++++- src/components/issues/Card.module.scss | 18 +++++++++++++++--- .../tasks/SuggestionBox/Suggestions.tsx | 3 ++- .../tasks/SuggestionBox/suggestion.module.scss | 14 ++++++++++---- src/components/tasks/card/card.module.scss | 4 ++++ src/components/tasks/card/index.tsx | 4 +++- src/interfaces/suggestionBox.type.ts | 1 + src/utils/time.ts | 1 - 9 files changed, 55 insertions(+), 14 deletions(-) diff --git a/__tests__/Unit/Components/Issues/ActionForm.test.tsx b/__tests__/Unit/Components/Issues/ActionForm.test.tsx index 520780dbb..68b1a5bcf 100644 --- a/__tests__/Unit/Components/Issues/ActionForm.test.tsx +++ b/__tests__/Unit/Components/Issues/ActionForm.test.tsx @@ -63,11 +63,13 @@ describe('Issues Action Form Component', () => { const submitButton = screen.getByRole('button', { name: /Assign Task/i, }); - const assignee = screen.getByPlaceholderText('Assignee'); + const assigneeLabel = screen.getByTestId('assignee-label'); + const assignee = screen.getByPlaceholderText('Type to search Assignee'); const endsOn = screen.getByLabelText(/Ends on:/); const status = screen.getByLabelText(/Status:/); const options = screen.getAllByRole('option'); expect(submitButton).toBeInTheDocument(); + expect(assigneeLabel).toBeInTheDocument(); expect(assignee).toBeInTheDocument(); expect(endsOn).toBeInTheDocument(); expect(status).toBeInTheDocument(); @@ -85,7 +87,7 @@ describe('Issues Action Form Component', () => { /> ); const assignee = screen.getByPlaceholderText( - 'Assignee' + 'Type to search Assignee' ) as HTMLInputElement; const status = screen.getByLabelText(/Status:/) as HTMLSelectElement; const options = screen.getAllByRole( @@ -117,7 +119,7 @@ describe('Issues Action Form Component', () => { /> ); const assignee = screen.getByPlaceholderText( - 'Assignee' + 'Type to search Assignee' ) as HTMLInputElement; let notFoundTextNode = null; fireEvent.change(assignee, { target: { value: 123 } }); diff --git a/src/components/issues/ActionForm.tsx b/src/components/issues/ActionForm.tsx index 49cf4642c..b6c3c7066 100644 --- a/src/components/issues/ActionForm.tsx +++ b/src/components/issues/ActionForm.tsx @@ -30,9 +30,11 @@ type ActionFormProps = { const taskStatus = Object.entries(BACKEND_TASK_STATUS); const endTimeStamp: number = getDateRelativeToToday(2, 'timestamp') as number; +const startTimeStamp: number = getDateRelativeToToday(0, 'timestamp') as number; + const initialState = { assignee: '', - startedOn: undefined, + startedOn: startTimeStamp, endsOn: endTimeStamp, status: 'ASSIGNED', }; @@ -135,10 +137,18 @@ const ActionForm: FC = ({ : styles.suggestions_container } > + { setShowSuggestion(true); dispatch({ @@ -164,6 +174,10 @@ const ActionForm: FC = ({ id="started-on" className={` ${styles.assign} ${styles.input_date}`} type="date" + defaultValue={getDateRelativeToToday( + 0, + 'formattedDate' + )} onChange={(e) => { dispatch({ type: 'startedOn', diff --git a/src/components/issues/Card.module.scss b/src/components/issues/Card.module.scss index 1d2f50705..3c59976cc 100644 --- a/src/components/issues/Card.module.scss +++ b/src/components/issues/Card.module.scss @@ -51,7 +51,15 @@ $card-text: #78716c; min-height: 22rem; width: 20rem; } - +.successContainer { + display: flex; + flex-direction: column; + padding: 1rem; + min-height: 22rem; + width: 20rem; + align-items: center; + gap: 1rem; +} .form_container { display: flex; flex-direction: column; @@ -67,13 +75,15 @@ $card-text: #78716c; border-radius: 2px; min-height: 5rem; height: 6rem; + font: inherit; + font-size: 0.8rem; border: none; resize: none; } .assign_label { line-height: 1rem; - margin-bottom: 0; + margin-bottom: 2px; font-size: 0.8rem; color: #a9a9a9; font-weight: 700; @@ -121,7 +131,9 @@ $card-text: #78716c; } .suggestions_container { position: relative; - display: inline-block; + display: flex; + flex-direction: column; + gap: 1px; } .suggestions_container_disabled { diff --git a/src/components/tasks/SuggestionBox/Suggestions.tsx b/src/components/tasks/SuggestionBox/Suggestions.tsx index 45f7df87e..607ab521d 100644 --- a/src/components/tasks/SuggestionBox/Suggestions.tsx +++ b/src/components/tasks/SuggestionBox/Suggestions.tsx @@ -17,6 +17,7 @@ const Suggestions = forwardRef( showSuggestion, handleAssignment, setShowSuggestion, + placeholderText = 'Assignee', }, ref ) => { @@ -87,7 +88,7 @@ const Suggestions = forwardRef( data-testid="assignee-input" ref={ref} value={assigneeName} - placeholder="Assignee" + placeholder={placeholderText} className={classNames.suggestionsInput} onChange={(e) => handleAssignment(e)} onKeyDown={handelKeyboardInput} diff --git a/src/components/tasks/SuggestionBox/suggestion.module.scss b/src/components/tasks/SuggestionBox/suggestion.module.scss index eb0546d98..11a213634 100644 --- a/src/components/tasks/SuggestionBox/suggestion.module.scss +++ b/src/components/tasks/SuggestionBox/suggestion.module.scss @@ -1,3 +1,5 @@ +$black-border-color: #1f1f1f; + .suggestions { border: 1px solid #999; list-style: none; @@ -43,14 +45,18 @@ .suggestionDiv { position: relative; display: inline-block; + width: 100%; } .suggestionsInput { - font-size: 1.3rem; font-weight: 400; - width: 7rem; - height: 2.5rem; + width: 100%; display: inline-block; + padding: 0 4px 0 4px; + height: 2rem; + border: 1px solid $black-border-color; + border-radius: 4px; + outline: none; } .suggestions-selected { @@ -60,7 +66,7 @@ .no-suggestions { color: #f84040; position: absolute; - top: 40px; z-index: 100; min-width: 5rem; + font-size: 0.8rem; } diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index 3f14a73a7..53d08be1c 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -449,3 +449,7 @@ $progressTextAnimation: #9babb8; .statusText { margin-left: 0.5rem; } + +.assigneeSuggestionInput { + width: 7rem; +} diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx index 760723919..20e996288 100644 --- a/src/components/tasks/card/index.tsx +++ b/src/components/tasks/card/index.tsx @@ -603,7 +603,9 @@ const Card: FC = ({ {isEditable ? isUserAuthorized && ( -
+
) => void; handleClick: (userName: string) => void; setShowSuggestion: (value: boolean) => void; + placeholderText?: string; }; diff --git a/src/utils/time.ts b/src/utils/time.ts index c5345b50a..0137c8ff7 100644 --- a/src/utils/time.ts +++ b/src/utils/time.ts @@ -5,7 +5,6 @@ export const getDateRelativeToToday = ( const today = new Date(); const calculatedDate = new Date(today); calculatedDate.setDate(today.getDate() + daysFromToday); - calculatedDate.setHours(5, 30, 0, 0); if (format === 'timestamp') { return calculatedDate.getTime() / 1000; } else if (format === 'formattedDate') {