restore old Alert api

.changeset/odd-crabs-approve.md

@@ -1,5 +1,5 @@
 ---
-'@itwin/itwinui-react': major
+'@itwin/itwinui-react': minor
 ---
 
-Alert composition has been updated such that it is now made up of customizable subcomponents, thus removing the `onClose`, `clickableText`, and `clickableTextProps` props from `Alert`.
+Alert can now be used through customizable subcomponents. The `onClose`, `clickableText`, and `clickableTextProps` props have been deprecated.

apps/storybook/src/Alert.stories.tsx

@@ -21,7 +21,7 @@ export default {
 
 export const Informational: Story<AlertProps> = (args) => {
   return (
-    <Alert type='informational' {...args}>
+    <Alert.Wrapper type='informational' {...args}>
       <Alert.Icon />
       <Alert.Message>
         This is an informational message.
@@ -30,7 +30,7 @@ export const Informational: Story<AlertProps> = (args) => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={action('Close!')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 
@@ -41,7 +41,7 @@ Informational.args = {
 
 export const Positive: Story<AlertProps> = (args) => {
   return (
-    <Alert type='positive' {...args}>
+    <Alert.Wrapper type='positive' {...args}>
       <Alert.Icon />
       <Alert.Message>
         This is a positive message.
@@ -50,7 +50,7 @@ export const Positive: Story<AlertProps> = (args) => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={action('Close!')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 
@@ -61,7 +61,7 @@ Positive.args = {
 
 export const Warning: Story<AlertProps> = (args) => {
   return (
-    <Alert type='warning' {...args}>
+    <Alert.Wrapper type='warning' {...args}>
       <Alert.Icon />
       <Alert.Message>
         This is a warning message.
@@ -70,7 +70,7 @@ export const Warning: Story<AlertProps> = (args) => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={action('Close!')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 
@@ -81,7 +81,7 @@ Warning.args = {
 
 export const Negative: Story<AlertProps> = (args) => {
   return (
-    <Alert type='negative' {...args}>
+    <Alert.Wrapper type='negative' {...args}>
       <Alert.Icon />
       <Alert.Message>
         This is a negative message.
@@ -90,7 +90,7 @@ export const Negative: Story<AlertProps> = (args) => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={action('Close!')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 
@@ -109,7 +109,7 @@ export const Sticky: Story<AlertProps> = (args) => {
         border: 'solid 0.5px',
       }}
     >
-      <Alert type='informational' isSticky={true} {...args}>
+      <Alert.Wrapper type='informational' isSticky={true} {...args}>
         <Alert.Icon />
         <Alert.Message>
           This is sticky!
@@ -118,7 +118,7 @@ export const Sticky: Story<AlertProps> = (args) => {
           </Alert.Action>
         </Alert.Message>
         <Alert.CloseButton onClick={action('Close!')} />
-      </Alert>
+      </Alert.Wrapper>
       <p style={{ margin: 0, padding: '8px' }}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
@@ -171,10 +171,10 @@ Sticky.args = {
 
 export const Empty: Story<AlertProps> = (args) => {
   return (
-    <Alert type='informational' {...args}>
+    <Alert.Wrapper type='informational' {...args}>
       <Alert.Icon />
       <Alert.Message>This is an empty info message.</Alert.Message>
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 
@@ -185,15 +185,15 @@ Empty.args = {
 
 export const CustomIcon: Story<AlertProps> = (args) => {
   return (
-    <Alert type='informational' {...args}>
+    <Alert.Wrapper type='informational' {...args}>
       <Alert.Icon>
         <SvgSmileyHappy />
       </Alert.Icon>
       <Alert.Message>This is an info message with a custom icon.</Alert.Message>
       <Alert.CloseButton onClick={action('Close!')}>
         <SvgPlaceholder />
       </Alert.CloseButton>
-    </Alert>
+    </Alert.Wrapper>
   );
 };
 

apps/website/src/demos/Alert.demo.tsx

@@ -8,14 +8,14 @@ import { Alert, ThemeProvider } from '@itwin/itwinui-react';
 export default function AlertDemo() {
   return (
     <ThemeProvider theme='dark'>
-      <Alert style={{ minWidth: 'min(100%, 350px)' }}>
+      <Alert.Wrapper style={{ minWidth: 'min(100%, 350px)' }}>
         <Alert.Icon />
         <Alert.Message>
           This is an alert
           <Alert.Action onClick={() => console.log('Clicked more info!')}>Learn more</Alert.Action>
         </Alert.Message>
         <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-      </Alert>
+      </Alert.Wrapper>
     </ThemeProvider>
   );
 }

examples/Alert.informational.tsx

@@ -7,7 +7,10 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert type='informational' style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper
+      type='informational'
+      style={{ minWidth: 'min(100%, 350px)' }}
+    >
       <Alert.Icon />
       <Alert.Message>
         This is an informational alert
@@ -16,6 +19,6 @@ export default () => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };

examples/Alert.inline.tsx

@@ -9,9 +9,9 @@ export default () => {
   return (
     <div>
       <p style={{ marginBottom: 12 }}>Page content before alert.</p>
-      <Alert style={{ minWidth: 'min(100%, 280px)' }}>
+      <Alert.Wrapper style={{ minWidth: 'min(100%, 280px)' }}>
         <Alert.Message>This is a inline alert.</Alert.Message>
-      </Alert>
+      </Alert.Wrapper>
       <p style={{ marginTop: 12 }}>Page content after alert.</p>
     </div>
   );

examples/Alert.main.tsx

@@ -7,7 +7,7 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper style={{ minWidth: 'min(100%, 350px)' }}>
       <Alert.Icon />
       <Alert.Message>
         This is an alert
@@ -16,6 +16,6 @@ export default () => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };

examples/Alert.negative.tsx

@@ -7,7 +7,7 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert type='negative' style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper type='negative' style={{ minWidth: 'min(100%, 350px)' }}>
       <Alert.Icon />
       <Alert.Message>
         This is a negative alert
@@ -16,6 +16,6 @@ export default () => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };

examples/Alert.positive.tsx

@@ -7,7 +7,7 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert type='positive' style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper type='positive' style={{ minWidth: 'min(100%, 350px)' }}>
       <Alert.Icon />
       <Alert.Message>
         This is a positive alert
@@ -16,6 +16,6 @@ export default () => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };

examples/Alert.sticky.tsx

@@ -8,7 +8,7 @@ import { Alert } from '@itwin/itwinui-react';
 export default () => {
   return (
     <div>
-      <Alert isSticky>
+      <Alert.Wrapper isSticky>
         <Alert.Icon />
         <Alert.Message>
           This is a sticky alert
@@ -17,7 +17,7 @@ export default () => {
           </Alert.Action>
         </Alert.Message>
         <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-      </Alert>
+      </Alert.Wrapper>
       <p>Page content.</p>
     </div>
   );

examples/Alert.warning.tsx

@@ -7,7 +7,7 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert type='warning' style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper type='warning' style={{ minWidth: 'min(100%, 350px)' }}>
       <Alert.Icon />
       <Alert.Message>
         This is a warning alert
@@ -16,6 +16,6 @@ export default () => {
         </Alert.Action>
       </Alert.Message>
       <Alert.CloseButton onClick={() => console.log('CLOSED')} />
-    </Alert>
+    </Alert.Wrapper>
   );
 };