Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add a close button to comment input #3897

Merged
merged 19 commits into from
Dec 6, 2024
Merged

fix: add a close button to comment input #3897

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
73078f5
fix: add a close button to comment input
Dec 2, 2024
6feec2b
Merge branch 'main' into fix-cancel-comment-button
tu2463 Dec 2, 2024
f9f1f5f
update index.tsx to support backwards compatibility
jullia02 Dec 3, 2024
04b3b64
add X button state clearing for comment inputs
jullia02 Dec 4, 2024
9ce0cef
add desktop close functionality
jullia02 Dec 4, 2024
4553ddf
remoeg unnecessary code
jullia02 Dec 4, 2024
d81668c
fixing lint errors
jullia02 Dec 4, 2024
67c0565
fixing lint errors
jullia02 Dec 4, 2024
5247eae
fixed eslint errors
jullia02 Dec 4, 2024
353580c
Merge branch 'main' into fix-cancel-comment-button
sshanzel Dec 5, 2024
d4dab35
Update packages/shared/src/components/fields/MarkdownInput/index.tsx
sshanzel Dec 5, 2024
5c41d1a
Update packages/shared/src/components/fields/MarkdownInput/index.tsx
sshanzel Dec 5, 2024
5349199
Update packages/shared/src/components/fields/MarkdownInput/index.tsx
sshanzel Dec 5, 2024
6eb436e
Update packages/shared/src/components/comments/CommentInputOrModal.tsx
sshanzel Dec 5, 2024
80769a6
Update packages/shared/src/components/fields/MarkdownInput/CommentMar…
sshanzel Dec 6, 2024
f6ecc67
Update packages/shared/src/components/fields/MarkdownInput/CommentMar…
sshanzel Dec 6, 2024
1af9147
Update packages/shared/src/components/fields/MarkdownInput/CommentMar…
sshanzel Dec 6, 2024
bce6f51
Update packages/shared/src/components/fields/MarkdownInput/index.tsx
sshanzel Dec 6, 2024
3a293b8
Update packages/shared/src/components/fields/MarkdownInput/index.tsx
sshanzel Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/shared/src/components/comments/CommentInputOrModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ export default function CommentInputOrModal({
<WriteCommentContext.Provider
value={{ mutateComment: mutateCommentResult }}
>
<CommentMarkdownInput {...props} className={className.input} />
<CommentMarkdownInput
{...props}
className={className.input}
onClose={onClose}
/>
</WriteCommentContext.Provider>
);
}
3 changes: 3 additions & 0 deletions packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface CommentMarkdownInputProps {
showUserAvatar?: boolean;
onChange?: (value: string) => void;
formProps?: FormHTMLAttributes<HTMLFormElement>;
onRequestClose?: () => void;
sshanzel marked this conversation as resolved.
Show resolved Hide resolved
}

export function CommentMarkdownInputComponent(
Expand All @@ -54,6 +55,7 @@ export function CommentMarkdownInputComponent(
showSubmit = true,
showUserAvatar = true,
formProps = {},
onRequestClose,
sshanzel marked this conversation as resolved.
Show resolved Hide resolved
}: CommentMarkdownInputProps,
ref: MutableRefObject<HTMLFormElement>,
): ReactElement {
Expand Down Expand Up @@ -131,6 +133,7 @@ export function CommentMarkdownInputComponent(
) : null
}
onValueUpdate={onChange}
onRequestClose={onRequestClose}
sshanzel marked this conversation as resolved.
Show resolved Hide resolved
/>
</form>
);
Expand Down
10 changes: 10 additions & 0 deletions packages/shared/src/components/fields/MarkdownInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { Loader } from '../../Loader';
import { Divider } from '../../utilities';
import { usePopupSelector } from '../../../hooks/usePopupSelector';
import { focusInput } from '../../../lib/textarea';
import CloseButton from '../../CloseButton';

interface ClassName {
container?: string;
Expand All @@ -65,6 +66,7 @@ interface MarkdownInputProps
isLoading?: boolean;
disabledSubmit?: boolean;
maxInputLength?: number;
onClose?: () => void;
}

enum CommentTab {
Expand Down Expand Up @@ -97,6 +99,7 @@ function MarkdownInput(
isLoading,
disabledSubmit,
maxInputLength,
onClose,
}: MarkdownInputProps,
ref: MutableRefObject<MarkdownRef>,
): ReactElement {
Expand Down Expand Up @@ -181,6 +184,13 @@ function MarkdownInput(
isUptoDate={initialContent === input}
/>
)}
{onClose && (
<CloseButton
size={ButtonSize.XSmall}
className="absolute right-1 top-1 laptop:right-3 laptop:top-3"
sshanzel marked this conversation as resolved.
Show resolved Hide resolved
onClick={onClose}
/>
)}
<ConditionalWrapper
condition={allowPreview}
wrapper={(children) => (
Expand Down