fix(alert): use negative and positive variants instead of critical an…

…d success (#9) We want to scope breaking changes down in Warp 1.0 but we might want to bring the renaming back for 2.0
warp-ds · Mar 27, 2023 · 82aa7ec · 82aa7ec
1 parent c80627e
commit 82aa7ec
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/packages/alert/docs/Alert.mdx b/packages/alert/docs/Alert.mdx
@@ -51,19 +51,19 @@ function ExpandableAlert() {
 }
 ```
 
-### Critical
+### Negative
 
 ```jsx example
-<Alert type="critical" show>
-  This is "critical" variant of the alert element
+<Alert type="negative" show>
+  This is "negative" variant of the alert element
 </Alert>
 ```
 
-### Success
+### Positive
 
 ```jsx example
-<Alert type="success" show>
-  This is "success" variant of the alert element
+<Alert type="positive" show>
+  This is "positive" variant of the alert element
 </Alert>
 ```
 

diff --git a/packages/alert/src/component.tsx b/packages/alert/src/component.tsx
@@ -41,10 +41,10 @@ export function Alert({
 const alert: Record<string, string> = {
   alert: "flex p-16 border border-l-4 rounded-4",
   icon: "w-16 mr-8 pt-4",
-  critical:  "i-border-$color-alert-critical-subtle-border i-bg-$color-alert-critical-background i-text-$color-alert-critical-text",
-  criticalIcon: "i-text-$color-alert-critical-icon",
-  success:  "i-border-$color-alert-success-subtle-border i-bg-$color-alert-success-background i-text-$color-alert-success-text",
-  successIcon: "i-text-$color-alert-success-icon",
+  negative:  "i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text",
+  negativeIcon: "i-text-$color-alert-negative-icon",
+  positive:  "i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text",
+  positiveIcon: "i-text-$color-alert-positive-icon",
   warning:  "i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text",
   warningIcon: "i-text-$color-alert-warning-icon",
   info:  "i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text",
@@ -54,7 +54,7 @@ const alert: Record<string, string> = {
 const iconMap: {
   [key in AlertProps['type']]: ReactElement;
 } = {
-  critical: (
+  negative: (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -74,7 +74,7 @@ const iconMap: {
       <path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" />
     </svg>
   ),
-  success: (
+  positive: (
     <svg
       width="16"
       height="16"

diff --git a/packages/alert/src/props.tsx b/packages/alert/src/props.tsx
@@ -6,7 +6,7 @@ export type AlertProps = {
   /**
    * Type of alert
    */
-  type: 'critical' | 'success' | 'warning' | 'info';
+  type: 'negative' | 'positive' | 'warning' | 'info';
   /**
    * ARIA live region "role" attribute value
    */

diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx
@@ -11,18 +11,18 @@ export const Default = () => {
   return (
     <div className="flex flex-col gap-y-16">
       <div>
-        <h3>Critical</h3>
-        <Alert type="critical" show={show}>
+        <h3>Negative</h3>
+        <Alert type="negative" show={show}>
           This is a message that you've done something really wrong.
         </Alert>
         <Button className="mt-16" small primary onClick={() => setShow(!show)}>
-          {show ? 'Hide critical alert' : 'Show critical alert'}
+          {show ? 'Hide negative alert' : 'Show negative alert'}
         </Button>
       </div>
       <div>
-        <h3>Success</h3>
-        <Alert type="success" show>
-          This is a message that gives you success feedback.
+        <h3>Positive</h3>
+        <Alert type="positive" show>
+          This is a message that gives you positive feedback.
         </Alert>
       </div>
       <div>
@@ -61,17 +61,17 @@ export const WithInteractiveContent = () => {
   return (
     <div className="flex flex-col gap-y-16">
       <div>
-        <h3>Critical</h3>
-        <Alert type="critical" show={show}>
+        <h3>Negative</h3>
+        <Alert type="negative" show={show}>
           <InteractiveContent />
         </Alert>
         <Button className="mt-16" small primary onClick={() => setShow(!show)}>
-          {show ? 'Hide critical alert' : 'Show critical alert'}
+          {show ? 'Hide negative alert' : 'Show negative alert'}
         </Button>
       </div>
       <div>
-        <h3>Success</h3>
-        <Alert type="success" show>
+        <h3>Positive</h3>
+        <Alert type="positive" show>
           <InteractiveContent />
         </Alert>
       </div>