Revert "Refactor project list notification by using onDismiss on Alert instead of custom Close component (#12043)" (#12133)

This reverts commit 9a3f95c322a063b84094452c21cb734a379da978

GitOrigin-RevId: 31fb4b1d429e2e9c611178afc3dc3c662340be44
This commit is contained in:
M Fahru 2023-03-06 08:36:42 -07:00 committed by Copybot
parent 8bd1026abd
commit 20f8fc2dc0
4 changed files with 10 additions and 26 deletions

View file

@ -2,8 +2,8 @@ import { useState } from 'react'
import { Alert, AlertProps } from 'react-bootstrap'
import Body from './body'
import Action from './action'
import Close from './close'
import classnames from 'classnames'
import { useTranslation } from 'react-i18next'
type NotificationProps = {
bsStyle: AlertProps['bsStyle']
@ -20,7 +20,6 @@ function Notification({
...props
}: NotificationProps) {
const [show, setShow] = useState(true)
const { t } = useTranslation()
const handleDismiss = () => {
if (onDismiss) {
@ -36,12 +35,13 @@ function Notification({
return (
<li className={classnames('notification-entry', className)} {...props}>
<Alert
bsStyle={bsStyle}
onDismiss={onDismiss ? handleDismiss : undefined}
closeLabel={t('close')}
>
<div className="notification-entry-content">{children}</div>
<Alert bsStyle={bsStyle}>
{children}
{onDismiss ? (
<div className="notification-close">
<Close onDismiss={handleDismiss} />
</div>
) : null}
</Alert>
</li>
)

View file

@ -234,7 +234,6 @@ export const Alerts = () => {
<Col md={8} mdOffset={2}>
<h2>Alerts</h2>
<h3>Non-dismissible alerts</h3>
<Alert bsStyle="danger">
An <code>.alert-danger</code> alert
</Alert>
@ -247,21 +246,6 @@ export const Alerts = () => {
<Alert bsStyle="warning">
An <code>.alert-warning</code> alert
</Alert>
<hr />
<h3>Dismissible alerts</h3>
<Alert bsStyle="danger" onDismiss={() => {}}>
An <code>.alert-danger</code> alert
</Alert>
<Alert bsStyle="success" onDismiss={() => {}}>
An <code>.alert-success</code> alert
</Alert>
<Alert bsStyle="info" onDismiss={() => {}}>
An <code>.alert-info</code> alert
</Alert>
<Alert bsStyle="warning" onDismiss={() => {}}>
An <code>.alert-warning</code> alert
</Alert>
</Col>
</Row>
</Grid>

View file

@ -240,7 +240,8 @@ input.project-list-table-select-item[type='checkbox'] {
margin-bottom: 0px;
}
.notification-entry {
.notification-entry-content {
.alert {
.box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
display: flex;
flex-wrap: wrap;
@media (min-width: @screen-sm-min) {

View file

@ -48,7 +48,6 @@
top: -2px;
right: -21px;
color: inherit;
text-shadow: none;
}
}