Skip to content

Commit c90dbd3

Browse files
authored
ref(alert) set showIcon to true by default (#95193)
The implementation between AlertLink and Alert differed and showIcon was defaulting to false. The default here should have been `true`, as we want the icon to be visible in more cases than we want to hide it.
1 parent 7892661 commit c90dbd3

File tree

270 files changed

+439
-542
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

270 files changed

+439
-542
lines changed

static/app/components/acl/comingSoon.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import {t} from 'sentry/locale';
44
function ComingSoon() {
55
return (
66
<Alert.Container>
7-
<Alert type="info" showIcon>
8-
{t('This feature is coming soon!')}
9-
</Alert>
7+
<Alert type="info">{t('This feature is coming soon!')}</Alert>
108
</Alert.Container>
119
);
1210
}

static/app/components/acl/featureDisabled.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ function FeatureDisabled({
118118
const AlertComponent = typeof alert === 'boolean' ? Alert : alert;
119119
return (
120120
<Alert.Container>
121-
<AlertComponent type="warning" showIcon expand={renderHelp()}>
121+
<AlertComponent type="warning" expand={renderHelp()}>
122122
{message}
123123
</AlertComponent>
124124
</Alert.Container>

static/app/components/alerts/onDemandMetricAlert.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function OnDemandMetricAlert({
5555

5656
return (
5757
<Alert.Container>
58-
<InfoAlert type="info" showIcon>
58+
<InfoAlert type="info">
5959
{message}
6060
{dismissable && (
6161
<DismissButton

static/app/components/confirm.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,9 @@ function ConfirmModal({
318318
<Body>
319319
{isError && (
320320
<Alert.Container>
321-
<Alert type="error">{errorMessage}</Alert>
321+
<Alert type="error" showIcon={false}>
322+
{errorMessage}
323+
</Alert>
322324
</Alert.Container>
323325
)}
324326
{makeConfirmMessage()}

static/app/components/confirmDelete.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ function ConfirmDelete({message, confirmInput, ...props}: Props) {
2626
renderMessage={({disableConfirmButton, confirm: triggerConfirm}) => (
2727
<Fragment>
2828
<Alert.Container>
29-
<Alert type="error">{message}</Alert>
29+
<Alert type="error" showIcon={false}>
30+
{message}
31+
</Alert>
3032
</Alert.Container>
3133
<FieldGroup
3234
flexibleControlStateSize

static/app/components/core/alert/index.mdx

Lines changed: 23 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ export const types = {Alert: APIReference.Alert};
2424
To create a basic alert, wrap your message in an `<Alert>` component and specify the appropriate type.
2525

2626
```jsx
27-
<Alert type="info" showIcon>
28-
This is an informational message
29-
</Alert>
27+
<Alert type="info">This is an informational message</Alert>
3028
```
3129

3230
### Types
@@ -35,40 +33,20 @@ Alerts come in five different types to convey different levels of importance and
3533

3634
<Storybook.Demo>
3735
<Alert.Container>
38-
<Alert type="muted" showIcon>
39-
This is a muted alert for neutral information
40-
</Alert>
41-
<Alert type="info" showIcon>
42-
This is an info alert for general information
43-
</Alert>
44-
<Alert type="warning" showIcon>
45-
This is a warning alert for important notices
46-
</Alert>
47-
<Alert type="success" showIcon>
48-
This is a success alert for positive feedback
49-
</Alert>
50-
<Alert type="error" showIcon>
51-
This is an error alert for critical issues
52-
</Alert>
36+
<Alert type="muted">This is a muted alert for neutral information</Alert>
37+
<Alert type="info">This is an info alert for general information</Alert>
38+
<Alert type="warning">This is a warning alert for important notices</Alert>
39+
<Alert type="success">This is a success alert for positive feedback</Alert>
40+
<Alert type="error">This is an error alert for critical issues</Alert>
5341
</Alert.Container>
5442
</Storybook.Demo>
5543
```jsx
5644
<Alert.Container>
57-
<Alert type="muted" showIcon>
58-
This is a muted alert for neutral information
59-
</Alert>
60-
<Alert type="info" showIcon>
61-
This is an info alert for general information
62-
</Alert>
63-
<Alert type="warning" showIcon>
64-
This is a warning alert for important notices
65-
</Alert>
66-
<Alert type="success" showIcon>
67-
This is a success alert for positive feedback
68-
</Alert>
69-
<Alert type="error" showIcon>
70-
This is an error alert for critical issues
71-
</Alert>
45+
<Alert type="muted">This is a muted alert for neutral information</Alert>
46+
<Alert type="info">This is an info alert for general information</Alert>
47+
<Alert type="warning">This is a warning alert for important notices</Alert>
48+
<Alert type="success">This is a success alert for positive feedback</Alert>
49+
<Alert type="error">This is an error alert for critical issues</Alert>
7250
</Alert.Container>
7351
```
7452

@@ -78,26 +56,22 @@ By default, alerts display appropriate icons based on their type. You can hide i
7856

7957
<Storybook.Demo>
8058
<Alert.Container>
81-
<Alert type="info" showIcon>
82-
Default info icon
83-
</Alert>
59+
<Alert type="info">Default info icon</Alert>
8460
<Alert type="warning" showIcon={false}>
8561
No icon
8662
</Alert>
87-
<Alert type="success" showIcon icon={<IconAdd />}>
63+
<Alert type="success" icon={<IconAdd />}>
8864
Custom add icon
8965
</Alert>
9066
</Alert.Container>
9167
</Storybook.Demo>
9268
```jsx
9369
<Alert.Container>
94-
<Alert type="info" showIcon>
95-
Default info icon
96-
</Alert>
70+
<Alert type="info">Default info icon</Alert>
9771
<Alert type="warning" showIcon={false}>
9872
No icon
9973
</Alert>
100-
<Alert type="success" showIcon icon={<IconAdd />}>
74+
<Alert type="success" icon={<IconAdd />}>
10175
Custom add icon
10276
</Alert>
10377
</Alert.Container>
@@ -110,7 +84,6 @@ Alerts can contain expandable content to provide additional details without over
11084
<Storybook.Demo>
11185
<Alert
11286
type="warning"
113-
showIcon
11487
expand={
11588
<div>
11689
<p>This is additional content that was hidden by default.</p>
@@ -127,7 +100,6 @@ Alerts can contain expandable content to provide additional details without over
127100
```jsx
128101
<Alert
129102
type="warning"
130-
showIcon
131103
expand={
132104
<div>
133105
<p>This is additional content that was hidden by default.</p>
@@ -150,7 +122,6 @@ Add interactive elements like buttons or links to the right side of alerts using
150122
<Alert.Container>
151123
<Alert
152124
type="info"
153-
showIcon
154125
trailingItems={
155126
<Button size="xs" priority="primary">
156127
Take Action
@@ -161,7 +132,6 @@ Add interactive elements like buttons or links to the right side of alerts using
161132
</Alert>
162133
<Alert
163134
type="error"
164-
showIcon
165135
trailingItems={
166136
<div>
167137
<Button size="xs" priority="danger" icon={<IconDelete />}>
@@ -181,7 +151,6 @@ Add interactive elements like buttons or links to the right side of alerts using
181151
<Alert.Container>
182152
<Alert
183153
type="info"
184-
showIcon
185154
trailingItems={
186155
<Button size="xs" priority="primary">
187156
Take Action
@@ -192,7 +161,6 @@ Add interactive elements like buttons or links to the right side of alerts using
192161
</Alert>
193162
<Alert
194163
type="error"
195-
showIcon
196164
trailingItems={
197165
<div>
198166
<Button size="xs" priority="danger" icon={<IconDelete />}>
@@ -214,12 +182,12 @@ Add interactive elements like buttons or links to the right side of alerts using
214182
System alerts are full-width variants typically used for application-level notifications or banners.
215183

216184
<Storybook.Demo>
217-
<Alert type="warning" showIcon system>
185+
<Alert type="warning" system>
218186
This is a system-wide alert that spans the full width of its container
219187
</Alert>
220188
</Storybook.Demo>
221189
```jsx
222-
<Alert type="warning" showIcon system>
190+
<Alert type="warning" system>
223191
This is a system-wide alert that spans the full width of its container
224192
</Alert>
225193
```
@@ -231,7 +199,6 @@ You can control the initial expansion state of alerts with expandable content.
231199
<Storybook.Demo>
232200
<Alert
233201
type="info"
234-
showIcon
235202
defaultExpanded
236203
expand={
237204
<div>
@@ -246,7 +213,6 @@ You can control the initial expansion state of alerts with expandable content.
246213
```jsx
247214
<Alert
248215
type="info"
249-
showIcon
250216
defaultExpanded
251217
expand={
252218
<div>
@@ -265,28 +231,16 @@ Use `Alert.Container` to properly manage spacing between multiple alerts.
265231

266232
<Storybook.Demo>
267233
<Alert.Container>
268-
<Alert type="info" showIcon>
269-
First alert in a container
270-
</Alert>
271-
<Alert type="warning" showIcon>
272-
Second alert in a container
273-
</Alert>
274-
<Alert type="success" showIcon>
275-
Third alert in a container
276-
</Alert>
234+
<Alert type="info">First alert in a container</Alert>
235+
<Alert type="warning">Second alert in a container</Alert>
236+
<Alert type="success">Third alert in a container</Alert>
277237
</Alert.Container>
278238
</Storybook.Demo>
279239
```jsx
280240
<Alert.Container>
281-
<Alert type="info" showIcon>
282-
First alert in a container
283-
</Alert>
284-
<Alert type="warning" showIcon>
285-
Second alert in a container
286-
</Alert>
287-
<Alert type="success" showIcon>
288-
Third alert in a container
289-
</Alert>
241+
<Alert type="info">First alert in a container</Alert>
242+
<Alert type="warning">Second alert in a container</Alert>
243+
<Alert type="success">Third alert in a container</Alert>
290244
</Alert.Container>
291245
```
292246

static/app/components/core/alert/index.spec.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,8 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
33
import {Alert} from 'sentry/components/core/alert';
44

55
describe('Alert', () => {
6-
it('does not render icon by default', () => {
6+
it('renders icon by default', () => {
77
render(<Alert type="info">Hello</Alert>);
8-
expect(screen.queryByRole('img')).not.toBeInTheDocument();
9-
});
10-
it('renders icon when showIcon is true', () => {
11-
render(
12-
<Alert type="info" showIcon>
13-
Hello
14-
</Alert>
15-
);
168
expect(screen.getByRole('img')).toBeInTheDocument();
179
});
1810

static/app/components/core/alert/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
2727
}
2828

2929
export function Alert({
30-
showIcon,
3130
icon,
3231
system,
3332
expand,
@@ -64,12 +63,14 @@ export function Alert({
6463
}
6564
}
6665

66+
const showIcon = props.showIcon ?? true;
67+
6768
return (
6869
<AlertContainer
6970
system={system}
7071
expand={expand}
7172
trailingItems={trailingItems}
72-
showIcon={showIcon}
73+
showIcon={showIcon as false}
7374
onClick={handleClick}
7475
hovered={isHovered && !expandIsHovered}
7576
className={classNames(type ? `ref-${type}` : '', className)}

static/app/components/customIgnoreDurationModal.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,7 @@ export default function CustomIgnoreDurationModal(props: Props) {
9999
</Body>
100100
{dateWarning && (
101101
<Alert.Container>
102-
<Alert type="error" showIcon>
103-
{t('Please enter a valid date in the future')}
104-
</Alert>
102+
<Alert type="error">{t('Please enter a valid date in the future')}</Alert>
105103
</Alert.Container>
106104
)}
107105
<Footer>

static/app/components/deprecatedforms/form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class Form<
139139
aria-label={(this.props as any)['aria-label']}
140140
>
141141
{isError && !hideErrors && (
142-
<Alert type="error">
142+
<Alert type="error" showIcon={false}>
143143
{nonFieldErrors ? (
144144
<div>
145145
<p>

0 commit comments

Comments
 (0)