Alert component tweaks (#121)

* correct Alert border-radius, text sizee, use IconButton * prettier
element-hq · Oct 31, 2023 · 4edbed2 · 4edbed2
1 parent 8236b3b
commit 4edbed2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 33 deletions.
diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.css
@@ -22,7 +22,7 @@ limitations under the License.
   justify-content: start;
   gap: var(--cpd-space-3x);
   padding: var(--cpd-space-4x);
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid;
 }
 
@@ -45,10 +45,6 @@ limitations under the License.
   flex: 1;
 }
 
-.title {
-  font: var(--cpd-font-body-md-semibold);
-}
-
 [data-type="success"] :is(.title, .icon) {
   color: var(--cpd-color-green-900);
 }
@@ -64,23 +60,3 @@ limitations under the License.
 .alert p {
   margin: 0;
 }
-
-[data-type] .close {
-  color: var(--cpd-color-gray-800);
-  border-radius: 50%;
-  padding: var(--cpd-space-scale);
-  cursor: pointer;
-}
-
-@media (hover) {
-  .close:hover {
-    color: var(--cpd-color-icon-primary);
-    background: var(--cpd-color-alpha-gray-300);
-    cursor: pointer;
-  }
-}
-
-.close:active {
-  color: var(--cpd-color-icon-primary);
-  background: var(--cpd-color-alpha-gray-300);
-}
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -35,6 +35,12 @@ export default {
       console.log("Clicked!");
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=795-7802&mode=design&t=g71gv6nZdJA7QSGB-0",
+    },
+  },
 } as Meta<typeof AlertComponent>;
 
 export const Success = {

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -23,6 +23,8 @@ import InfoIcon from "@vector-im/compound-design-tokens/icons/info.svg";
 import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg";
 
 import styles from "./Alert.module.css";
+import { Text } from "../Typography/Text";
+import { IconButton } from "../IconButton/IconButton";
 
 type AlertProps = {
   /**
@@ -82,19 +84,23 @@ export const Alert: React.FC<PropsWithChildren<AlertProps>> = ({
         "aria-hidden": true,
       })}
       <div className={styles.content}>
-        <p className={styles.title}>{title}</p>
-        <p className={styles.caption}>{children}</p>
+        <Text size="md" weight="semibold">
+          {title}
+        </Text>
+        <Text size="sm" weight="regular">
+          {children}
+        </Text>
       </div>
       {/* TODO: Setup an i18n function for the aria label below */}
       {onClose && (
-        <CloseIcon
-          width={16}
-          height={16}
+        <IconButton
           onClick={onClose}
           aria-label="Close"
           role="button"
           className={styles.close}
-        />
+        >
+          <CloseIcon />
+        </IconButton>
       )}
     </div>
   );

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -24,12 +24,12 @@ exports[`Alert > renders 1`] = `
       class="_content_6cfd7b"
     >
       <p
-        class="_title_6cfd7b"
+        class="_font-body-md-semibold_489030"
       >
         Title
       </p>
       <p
-        class="_caption_6cfd7b"
+        class="_font-body-sm-regular_489030"
       >
         Success!
       </p>