Merge pull request #101 from gsoft-inc/feature/98

Feature/98 - Alert fixes
gsoft-inc · Apr 16, 2024 · 7f59e36 · 7f59e36
2 parents 0933cc4 + 2508187
commit 7f59e36
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 58 deletions.
diff --git a/.changeset/thirty-toys-prove.md b/.changeset/thirty-toys-prove.md
@@ -0,0 +1,7 @@
+---
+"@orbit-ui/transition-components": major
+---
+
+- Alert is now dismissable by default. This is potentially a breaking change if you we're not expecting the alert to be closable. To fix this, either add `dismissable={false}` to the Alert, or handle the `onClose` event handler.
+
+- Dialog small size has been slightly reduced by 84px.
diff --git a/.storybook/components/component-info/ComponentInfo.tsx b/.storybook/components/component-info/ComponentInfo.tsx
@@ -29,7 +29,7 @@ const ExtendLinks = {
 };
 
 
-export interface ComponentInfoProps extends ComponentProps<"dl">{
+export interface ComponentInfoProps extends ComponentProps<"dl"> {
     usage: string | {
         sharegate: string;
     };

diff --git a/packages/components/src/alert/docs/Alert.stories.mdx b/packages/components/src/alert/docs/Alert.stories.mdx
@@ -155,38 +155,18 @@ Use a destructive alert to confirm a permanent change, like deleting data.
     </Story>
 </Preview>
 
-### Warning
+### Not Dismissable
 
-Use a warning alert to inform of a significant change.
+An alert can be undismissable.
 
 <Preview>
-    <Story name="warning">
+    <Story name="not dismissable">
         <AlertTrigger>
             <Button variant="secondary">Open</Button>
             <Alert
-                variant="warning"
-                primaryButtonLabel="Ok"
-                secondaryButtonLabel="Diagnose"
-            >
-                <Heading>Low carburant</Heading>
-                <Content>The space shuttle will be out of fuel in an hour.</Content>
-            </Alert>
-        </AlertTrigger>
-    </Story>
-</Preview>
-
-### Negative
-
-Use a negative alert to inform that something went wrong, like a server error.
-
-<Preview>
-    <Story name="negative">
-        <AlertTrigger>
-            <Button variant="secondary">Open</Button>
-            <Alert
-                variant="negative"
                 primaryButtonLabel="Retry"
                 cancelButtonLabel="Cancel"
+                dismissable={false}
             >
                 <Heading>Network error</Heading>
                 <Content>Something went wrong while connecting to NASA network. Please try again in a few minutes.</Content>

diff --git a/packages/components/src/alert/src/Alert.css b/packages/components/src/alert/src/Alert.css
@@ -1,7 +1,29 @@
-.o-ui-alert-warning-icon {
-    color: var(--hop-warning-icon-weak);
+.o-ui-alert-button-group > .o-ui-button {
+    max-width: 50%;
+    width: 50%;
+    flex-grow: 1;
+    flex-basis: 0;
 }
 
-.o-ui-alert-negative-icon {
-    color: var(--hop-danger-icon-weak);
+.o-ui-alert-heading {
+    text-align: left;
+    width: 100%;
+}
+
+.o-ui-alert-content {
+    text-align: left;
+}
+
+/* We need to determine a sensitive max-width to wrap - 360px seems like a good point */
+@media all and (max-width: 40rem) {
+    .o-ui-alert-button-group > .o-ui-button {
+        max-width: 100%;
+        width: 100%;
+    }
+    .o-ui-alert-heading {
+        text-align: center;
+    }
+    .o-ui-alert-content {
+        text-align: center;
+    }
 }
diff --git a/packages/components/src/alert/src/Alert.tsx b/packages/components/src/alert/src/Alert.tsx
@@ -1,13 +1,11 @@
 import { AbstractDialogProps, Dialog, useDialogTriggerContext } from "../../dialog";
 import { Button, ButtonGroup } from "../../button";
 import { ComponentProps, MouseEvent, forwardRef, useMemo } from "react";
-import { Header } from "../../placeholders";
-import { WarningIcon } from "@hopper-ui/icons";
 import { OmitInternalProps, isNil, isNilOrEmpty, mergeProps, useChainedEventCallback, useSlots } from "../../shared";
 
 const DefaultElement = "section";
 
-export interface InnerAlertProps extends Omit<AbstractDialogProps<typeof DefaultElement>, "dismissable"> {
+export interface InnerAlertProps extends AbstractDialogProps<typeof DefaultElement> {
     /**
      * The button to focus by default when the alert open.
      */
@@ -53,14 +51,15 @@ export interface InnerAlertProps extends Omit<AbstractDialogProps<typeof Default
     /**
      * The style to use.
      */
-    variant?: "confirmation" | "destructive" | "warning" | "negative";
+    variant?: "confirmation" | "destructive";
 }
 
 export function InnerAlert({
     as = DefaultElement,
     autoFocusButton,
     cancelButtonLabel,
     children,
+    dismissable = true,
     forwardedRef,
     onCancelButtonClick,
     onPrimaryButtonClick,
@@ -79,8 +78,12 @@ export function InnerAlert({
         _: {
             required: ["heading", "content"]
         },
-        content: null,
-        heading: null
+        content: {
+            className: "o-ui-alert-content"
+        },
+        heading: {
+            className: "o-ui-alert-heading"
+        }
     }), []));
 
     const handlePrimaryButtonClick = useChainedEventCallback(onPrimaryButtonClick, event => {
@@ -101,18 +104,6 @@ export function InnerAlert({
         }
     });
 
-    const warningIconMarkup = variant === "warning" && (
-        <Header>
-            <WarningIcon className="o-ui-alert-icon o-ui-alert-warning-icon" />
-        </Header>
-    );
-
-    const negativeIconMarkup = variant === "negative" && (
-        <Header>
-            <WarningIcon className="o-ui-alert-icon o-ui-alert-negative-icon" />
-        </Header>
-    );
-
     const primaryButtonMarkup = (
         <Button
             autoFocus={isNil(autoFocusButton) || autoFocusButton === "primary"}
@@ -135,7 +126,6 @@ export function InnerAlert({
         </Button>
     );
 
-
     const cancelButtonMarkup = !isNilOrEmpty(cancelButtonLabel) && (
         <Button
             autoFocus={autoFocusButton === "cancel"}
@@ -149,7 +139,17 @@ export function InnerAlert({
     const buttonsMarkup = isNil(secondaryButtonMarkup) && isNil(cancelButtonMarkup)
         ? primaryButtonMarkup
         : (
-            <ButtonGroup>
+            <ButtonGroup
+                className="o-ui-alert-button-group"
+                fluid={{
+                    base: true,
+                    xs: false
+                }}
+                orientation={{
+                    base: "vertical",
+                    xs: "horizontal"
+                }}
+            >
                 {cancelButtonMarkup}
                 {secondaryButtonMarkup}
                 {primaryButtonMarkup}
@@ -162,7 +162,8 @@ export function InnerAlert({
                 rest,
                 {
                     as,
-                    dismissable: false,
+                    className: "o-ui-alert o-ui-alert-dialog",
+                    dismissable,
                     ref: forwardedRef,
                     role: "alertdialog" as const,
                     size: "sm" as const,
@@ -171,8 +172,6 @@ export function InnerAlert({
             )}
         >
             {heading}
-            {warningIconMarkup}
-            {negativeIconMarkup}
             {content}
             {buttonsMarkup}
         </Dialog>

diff --git a/packages/components/src/alert/src/AlertTrigger.tsx b/packages/components/src/alert/src/AlertTrigger.tsx
@@ -11,7 +11,6 @@ export function InnerAlertTrigger({
     return (
         <DialogTrigger
             {...rest}
-            dismissable={false}
             ref={forwardedRef}
         />
     );

diff --git a/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx b/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx
@@ -14,10 +14,6 @@ createTestSuite(<Alert variant="confirmation" />, stories("/confirmation"));
 
 createTestSuite(<Alert variant="destructive" />, stories("/destructive"));
 
-createTestSuite(<Alert variant="warning" />, stories("/warning"));
-
-createTestSuite(<Alert variant="negative" />, stories("/negative"));
-
 stories()
     .add("styled system", () =>
         <Alert

diff --git a/packages/components/src/alert/tests/chromatic/createTestSuite.jsx b/packages/components/src/alert/tests/chromatic/createTestSuite.jsx
@@ -70,6 +70,17 @@ export function createTestSuite(element, stories) {
                 <Content>Are you sure you want to launch the space shuttle?</Content>
             </Alert>
         )
+        .add("not dismissable", () =>
+            <Alert
+                primaryButtonLabel="Launch"
+                secondaryButtonLabel="Postpone"
+                element={element}
+                dismissable={false}
+            >
+                <Heading>Launch</Heading>
+                <Content>Are you sure you want to launch the space shuttle?</Content>
+            </Alert>
+        )
         .add("zoom in", () =>
             <Div className="zoom-in">
                 <Alert primaryButtonLabel="Yes" element={element}>

diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css
@@ -49,7 +49,7 @@
 
 /* DIALOG | SIZES */
 .o-ui-dialog-sm {
-    width: 34rem;
+    width: 28.75rem;
 }
 
 .o-ui-dialog-md {