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

Danielle/482 notifications needs a way to exit the modal #609

Merged
merged 20 commits into from
Oct 16, 2024
Merged

Danielle/482 notifications needs a way to exit the modal #609

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a550d65
update background color from primary to muted for better contrast on …
Danielle254 Oct 11, 2024
3d2c998
add button component to alert
Danielle254 Oct 11, 2024
722d4a3
fix - change padding left to margin left because it was impacting the…
Danielle254 Oct 11, 2024
9008d93
fix - alert disappears on clicking the close button
Danielle254 Oct 11, 2024
186b408
fix - add accessibility for close button
Danielle254 Oct 11, 2024
cb4603a
fix - eslint error. remove autoFocus property
Danielle254 Oct 11, 2024
da2345e
Merge branch 'develop' of https://github.com/LetsGetTechnical/gridiro…
Danielle254 Oct 11, 2024
402bb33
Merge branch 'develop' of https://github.com/LetsGetTechnical/gridiro…
Danielle254 Oct 13, 2024
ed97bfe
fix: udpate Button component structure to match previously establishe…
Danielle254 Oct 13, 2024
0bb4542
fix: address TypeScript error and begin drafting tests for dismiss bu…
Danielle254 Oct 13, 2024
d5ce353
fix: update aria-label to be more descriptive
Danielle254 Oct 13, 2024
03aa273
fix: test that dismiss button renders for each type of alert
Danielle254 Oct 13, 2024
58a1853
fix: make test for button render its own separate test
Danielle254 Oct 13, 2024
1a86e1c
fix: remove unneeded imports
Danielle254 Oct 13, 2024
d254e7f
fix: nested all tests inside of for loop to run each test for all pos…
Danielle254 Oct 13, 2024
deb61d1
fix: sort imports alphabetically
Danielle254 Oct 16, 2024
7453829
Merge branch 'develop' of https://github.com/LetsGetTechnical/gridiro…
Danielle254 Oct 16, 2024
4b93b1c
fix: update hover styling for button as requested in PR 609
Danielle254 Oct 16, 2024
cb82b81
fix: undo change to Alert styling and accommodate needed change to pa…
Danielle254 Oct 16, 2024
5181c17
fix: change 'test' to 'it' in unit test
Danielle254 Oct 16, 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
10 changes: 5 additions & 5 deletions components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
'relative w-full rounded-lg border p-4 [&>svg~*]:ml-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come these styles were updated? This ticket only pertains towards the close button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shashilo this styling was causing the button to be rendered distorted. I could not find another workaround.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shashilo this is now fixed

{
variants: {
variant: {
default: 'bg-background text-foreground',
default: 'bg-muted text-muted-foreground',
error:
'bg-background text-error [&>svg]:text-error text-error border-error',
'bg-muted text-error [&>svg]:text-error text-error border-error',
warning:
'bg-background text-warning [&>svg]:text-warning text-warning border-warning',
'bg-muted text-warning [&>svg]:text-warning text-warning border-warning',
success:
'bg-background text-success [&>svg]:text-success text-success border-success',
'bg-muted text-success [&>svg]:text-success text-success border-success',
},
},
defaultVariants: {
Expand Down
14 changes: 13 additions & 1 deletion components/AlertNotification/AlertNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import { Alert as AlertDefault } from '../Alert/Alert';
import { AlertTitle } from '../AlertTItle/AlertTitle';
import { AlertDescription } from '../AlertDescription/AlertDescription';
import { JSX } from 'react';
import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
import { CheckCircle, XCircle, Info, AlertTriangle, X } from 'lucide-react';
import { IAlertNotification } from './AlertNotification.interface';
import { AlertVariants } from './Alerts.enum';
import { Button } from '../Button/Button';
import toast from 'react-hot-toast';

ryandotfurrer marked this conversation as resolved.
Show resolved Hide resolved
const variantConfig = {
success: {
Expand Down Expand Up @@ -46,6 +48,16 @@ const Alert = ({
<Icon className="h-4 w-4" data-testid="alert-icon" />
<AlertTitle title={title} data-testid="alert-title" />
<AlertDescription message={message} data-testid="alert-message" />
<Button
variant="ghost"
size="icon"
className="absolute right-4 top-2"
data-testid="dismiss-alert-btn"
Danielle254 marked this conversation as resolved.
Show resolved Hide resolved
onClick={() => toast.remove()}
aria-label='close notification'
>
<X />
</Button>
</AlertDefault>
);
};
Expand Down