[CSYS-472] Fix: inserting IconButton at the Dialogs (#76)

* fix: inserting IconButton at the Dialogs * fix: swtiching the Icon type to the default one * fix: updating snapshots
labcodes · May 8, 2023 · 0c7c7f1 · 0c7c7f1
1 parent bf3e164
commit 0c7c7f1
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 282 deletions.
diff --git a/apps/docs/stories/Dialog/MessageDialog.stories.js b/apps/docs/stories/Dialog/MessageDialog.stories.js
@@ -3,6 +3,7 @@ import React from "react";
 import { ICON_TYPES } from "../../../../packages/confetti-ds/src/constants";
 import {
   Button,
+  IconButton,
   MessageDialog as Component,
 } from "../../../../packages/confetti-ds/src";
 import { usePrevious } from "../hooks";
@@ -39,7 +40,7 @@ export const Message = (args) => {
 
   return (
     <React.Fragment>
-      <Button onClick={() => setIsOpen(true)} text="Open Dialog" />
+      <Button onClick={() => setIsOpen(true)} label="Open Dialog" />
       <Component
         {...args}
         isOpen={isOpen}
@@ -55,11 +56,11 @@ Message.args = {
   content:
     "This is the main content of a Message Dialog. You may want to put as much content as you want, as long as it's a string.",
   buttonProps: {
-    text: "Required button",
+    label: "Required button",
     onClick: () => alert("Required button clicked"),
   },
   outlineButtonProps: {
-    text: "Optional button",
+    label: "Optional button",
     onClick: () => alert("Optional button clicked"),
   },
 };
diff --git a/apps/docs/stories/Dialog/StandardDialog.stories.js b/apps/docs/stories/Dialog/StandardDialog.stories.js
@@ -35,7 +35,7 @@ export const Standard = (args) => {
 
   return (
     <React.Fragment>
-      <Button onClick={() => setIsOpen(true)} text="Open Dialog" />
+      <Button onClick={() => setIsOpen(true)} label="Open Dialog" />
       <Component
         {...args}
         isOpen={isOpen}
@@ -50,11 +50,11 @@ Standard.args = {
   content:
     "This is the main content of a Standard Dialog. You may want to put as much content as you want, as long as it's a string.",
   buttonProps: {
-    text: "Required button",
+    label: "Required button",
     onClick: () => alert("Required button clicked"),
   },
   outlineButtonProps: {
-    text: "Optional button",
+    label: "Optional button",
     onClick: () => alert("Optional button clicked"),
   },
 };
diff --git a/packages/confetti-ds/package.json b/packages/confetti-ds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labcodes/confetti-ds",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.16",
   "description": "Labcodes' design system, focused on accessibility and ease to use",
   "main": "dist/index.js",
   "husky": {

diff --git a/packages/confetti-ds/scss/components/_lab-dialog.scss b/packages/confetti-ds/scss/components/_lab-dialog.scss
@@ -1,4 +1,4 @@
-@use 'sass:map';
+@use "sass:map";
 
 // Transitions
 @keyframes fadeIn {
@@ -196,114 +196,6 @@
 }
 
 // Global elements
-.lab-dialog__close-button {
-  display: flex;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  background-color: unset;
-  border: none;
-  align-items: center;
-  justify-content: center;
-
-  &:focus {
-    border-radius: $radius-1;
-    box-shadow: 0 0 0 2px $teal-30;
-    background-color: transparent;
-    outline: unset;
-
-    .lab-dialog__close-button-icon {
-      color: $teal-60;
-    }
-  }
-
-  &:hover {
-    border-radius: $radius-1;
-    color: $teal-10;
-
-    .lab-dialog__close-button-icon {
-      color: $teal-60;
-    }
-  }
-
-  .lab-dialog__close-button-icon {
-   color: $mineral-60;
-  }
-
-  &:active {
-    border-radius: $radius-1;
-    box-shadow: 0 0 0 2px $teal-30;
-    color: $teal-20;
-    outline: unset;
-
-    .lab-dialog__close-button-icon {
-      color: $teal-70;
-    }
-  }
-
-  @include from($tablet) {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.lab-dialog__mobile-close-button {
-  display: flex;
-  justify-content: center;
-  margin-top: -$spacing-6;
-  margin-bottom: $spacing-1;
-  width: 100%;
-  height: 24px;
-  background-color: unset;
-  border: none;
-
-  .lab-icon {
-    color: $mineral-60;
-  }
-
-  &.lab-dialog__mobile-close-button--message {
-    display: none;
-  }
-
-  &:focus {
-    border-radius: $radius-1;
-    box-shadow: 0 0 0 2px $teal-30;
-    background-color: transparent;
-    outline: unset;
-
-    .lab-icon {
-      color: $teal-60;
-    }
-  }
-
-  &:hover {
-    border-radius: $radius-1;
-    background-color: $teal-10;
-
-    .lab-icon {
-      color: $teal-60;
-    }
-  }
-
-  .lab-icon {
-    color: $mineral-60;
-  }
-
-  &:active {
-    border-radius: $radius-1;
-    box-shadow: 0 0 0 2px $teal-30;
-    color: $teal-20;
-    outline: unset;
-
-    .lab-icon {
-      color: $teal-70;
-    }
-  }
-
-  @include from($tablet) {
-    display: none;
-  }
-}
 
 .lab-dialog__header {
   display: flex;

diff --git a/packages/confetti-ds/src/Dialog/MessageDialog.tsx b/packages/confetti-ds/src/Dialog/MessageDialog.tsx
@@ -3,6 +3,7 @@ import React, { SyntheticEvent } from "react";
 import Icon from "../Icon";
 import DialogWrapper from "./DialogWrapper";
 import { Button, OutlineButton } from "../Button";
+import IconButton from "../IconButton";
 import { IconTypes } from "../constants";
 import { OutlineButtonProps } from "../Button/OutlineButton";
 import { ButtonProps } from "../Button/Button";
@@ -48,19 +49,6 @@ export default function MessageDialog({
     }
   };
 
-  const handleTouchStart = (event) => {
-    setSwipeStartYCoordinate(event.changedTouches[0].screenY);
-  };
-
-  const handleTouchEnd = (event) => {
-    if (event.changedTouches[0].screenY - swipeStartYCoordinate >= 75) {
-      setSwipeStartYCoordinate(undefined);
-      handleClose();
-    } else {
-      setSwipeStartYCoordinate(undefined);
-    }
-  };
-
   React.useEffect(() => {
     document.addEventListener("keydown", handleKeyDown, false);
     return () => {
@@ -82,25 +70,14 @@ export default function MessageDialog({
         role="dialog"
         aria-modal="true"
       >
-        <button
-          type="button"
-          className="lab-dialog__mobile-close-button lab-dialog__mobile-close-button--message"
-          onClick={handleClose}
-          onTouchStart={handleTouchStart}
-          onTouchEnd={handleTouchEnd}
-        >
-          <Icon type="ChevronDown" />
-        </button>
-        <div className="lab-dialog__header lab-dialog__header--message">
-          <button
-            className="lab-dialog__close-button"
-            type="button"
+        <div className="lab-dialog__close-iconbutton is-flex is-justify-content-right">
+          <IconButton
+            icon="Dismiss"
             {...(isModal ? { tabIndex: 2 } : undefined)}
             onClick={handleClose}
-          >
-            <Icon type="Dismiss" className="lab-dialog__close-button-icon" />
-          </button>
+          />
         </div>
+        <div className="lab-dialog__header lab-dialog__header--message"></div>
 
         <div className="lab-dialog__icon-wrapper">
           <Icon type={icon} className="lab-dialog__icon" />

diff --git a/packages/confetti-ds/src/Dialog/StandardDialog.tsx b/packages/confetti-ds/src/Dialog/StandardDialog.tsx
@@ -2,6 +2,7 @@ import React, { SyntheticEvent } from "react";
 
 import Icon from "../Icon";
 import { Button, OutlineButton } from "../Button";
+import IconButton from "../IconButton";
 import DialogWrapper from "./DialogWrapper";
 import { IconTypes } from "../constants";
 import { OutlineButtonProps } from "../Button/OutlineButton";
@@ -76,26 +77,13 @@ export default function StandardDialog({
       isLarge={isLarge}
     >
       <div className="lab-dialog__content" role="dialog" aria-modal="true">
-        <button
-          type="button"
-          className="lab-dialog__mobile-close-button"
-          onClick={handleClose}
-          onTouchStart={handleTouchStart}
-          onTouchEnd={handleTouchEnd}
-        >
-          <Icon type="ChevronUp" />
-        </button>
-
         <div className="lab-dialog__header">
           <div className="lab-dialog__title">{title}</div>
-          <button
-            className="lab-dialog__close-button"
-            type="button"
-            onClick={handleClose}
+          <IconButton
+            icon="Dismiss"
             {...(isModal ? { tabIndex: 2 } : undefined)}
-          >
-            <Icon type="Dismiss" className="lab-dialog__close-button-icon" />
-          </button>
+            onClick={handleClose}
+          />
         </div>
 
         <p className="lab-dialog__body">{content}</p>

diff --git a/packages/confetti-ds/src/Dialog/__snapshots__/MessageDialog.test.tsx.snap b/packages/confetti-ds/src/Dialog/__snapshots__/MessageDialog.test.tsx.snap
@@ -18,43 +18,16 @@ exports[`MessageDialog rendering with isLarge false 1`] = `
       className="lab-dialog__content lab-dialog__content--message"
       role="dialog"
     >
-      <button
-        className="lab-dialog__mobile-close-button lab-dialog__mobile-close-button--message"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
-        type="button"
-      >
-        <span
-          className="lab-icon lab-icon--ChevronDown  "
-        >
-          <svg
-            aria-hidden={true}
-            className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-      </button>
       <div
-        className="lab-dialog__header lab-dialog__header--message"
+        className="lab-dialog__close-iconbutton is-flex is-justify-content-right"
       >
         <button
-          className="lab-dialog__close-button"
+          className="lab-iconbtn lab-iconbtn--teal"
           onClick={[Function]}
-          tabIndex={2}
-          type="button"
         >
+           
           <span
-            className="lab-icon lab-icon--Dismiss  lab-dialog__close-button-icon"
+            className="lab-icon lab-icon--Dismiss lab-icon--mineral-80 lab-iconbtn__icon"
           >
             <svg
               aria-hidden={true}
@@ -73,6 +46,9 @@ exports[`MessageDialog rendering with isLarge false 1`] = `
           </span>
         </button>
       </div>
+      <div
+        className="lab-dialog__header lab-dialog__header--message"
+      />
       <div
         className="lab-dialog__icon-wrapper"
       >
@@ -140,42 +116,16 @@ exports[`MessageDialog rendering with isModal false 1`] = `
     className="lab-dialog__content lab-dialog__content--message"
     role="dialog"
   >
-    <button
-      className="lab-dialog__mobile-close-button lab-dialog__mobile-close-button--message"
-      onClick={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      type="button"
-    >
-      <span
-        className="lab-icon lab-icon--ChevronDown  "
-      >
-        <svg
-          aria-hidden={true}
-          className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 20 20"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </button>
     <div
-      className="lab-dialog__header lab-dialog__header--message"
+      className="lab-dialog__close-iconbutton is-flex is-justify-content-right"
     >
       <button
-        className="lab-dialog__close-button"
+        className="lab-iconbtn lab-iconbtn--teal"
         onClick={[Function]}
-        type="button"
       >
+         
         <span
-          className="lab-icon lab-icon--Dismiss  lab-dialog__close-button-icon"
+          className="lab-icon lab-icon--Dismiss lab-icon--mineral-80 lab-iconbtn__icon"
         >
           <svg
             aria-hidden={true}
@@ -194,6 +144,9 @@ exports[`MessageDialog rendering with isModal false 1`] = `
         </span>
       </button>
     </div>
+    <div
+      className="lab-dialog__header lab-dialog__header--message"
+    />
     <div
       className="lab-dialog__icon-wrapper"
     >