Improve transitions and add icons

Author: rendall

cypress/e2e/generic/public-comment.cy.js

@@ -43,9 +43,13 @@ describe("Guest comment", { testIsolation: false }, () => {
     const loggedInEditText = generateRandomCopy()
     cy.intercept("PUT", ".netlify/functions/comment/*").as("putComment")
     cy.get(".overflow-menu-button").first().click()
-    cy.get(".comment-edit-button").first().click()
-    cy.get("form.comment-form .comment-field").clear().type(loggedInEditText)
-    cy.get("form.comment-form .comment-update-button").click()
+    cy.get(".comment-edit-button").click()
+    cy.get("li.comment.is-open form.comment-form .comment-field")
+      .clear()
+      .type(loggedInEditText)
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
     cy.wait("@putComment").its("response.statusCode").should("eq", 204) // 204
     cy.contains("article.comment-body p", loggedInEditText).should("exist")
   })
@@ -65,13 +69,19 @@ describe("Guest comment", { testIsolation: false }, () => {
       } else req.reply()
     }).as("putComment")
     cy.get(".overflow-menu-button").first().click()
-    cy.get(".comment-edit-button").first().click()
+    cy.get(".comment-edit-button").click()
+    cy.get("li.comment.is-open form.comment-form .comment-field")
+      .clear()
+      .type(errorText)
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
 
-    cy.get("form.comment-form .comment-field").clear().type(errorText)
-    cy.get("form.comment-form .comment-update-button").click()
     cy.wait("@putComment")
 
-    cy.get("form.comment-form .comment-update-button").click()
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
 
     cy.wait("@putComment").then(interception => {
       expect(interception.response.statusCode).to.equal(204)
@@ -102,10 +112,12 @@ describe("Guest comment", { testIsolation: false }, () => {
   })
 
   it("Reply to a comment as a logged-in guest", () => {
-    cy.get("button.comment-reply-button").first().as("replyButton")
-    cy.get("@replyButton").closest("article.comment-body").as("commentBody")
-    cy.get("@replyButton").click()
-    cy.get("form.guest-login-form").should("not.exist")
+    const commentText = generateRandomCopy()
+    cy.get("button.comment-reply-button").first().click()
+    // cy.wait(500)
+    cy.get("textarea.comment-field").should("have.length", 1).type(commentText)
+    cy.get("button.comment-submit-button").click()
+    cy.get("article.comment-body p").contains(commentText).should("exist")
   })
 
   it("Can log out", () => {

cypress/e2e/generic/rtl.cy.js

@@ -114,9 +114,10 @@ describe("Simple Comment right-to-left rendering", () => {
       })
     })
     cy.visit("/")
-    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p")
-      .first()
-      .should("have.class", "is-rtl")
+    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p").should(
+      "have.class",
+      "is-rtl"
+    )
   })
 
   it("properly renders Arabic", () => {
@@ -143,9 +144,9 @@ describe("Simple Comment right-to-left rendering", () => {
       })
     })
     cy.visit("/")
-    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p")
-      .children("article.comment-body")
-      .first()
-      .should("not.have.class", "is-rtl")
+    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p").should(
+      "not.have.class",
+      "is-rtl"
+    )
   })
 })

src/components/CommentDisplay.svelte

@@ -16,10 +16,10 @@
   import {
     ClosedCaptionAlt as ReplyIcon,
     Edit as EditIcon,
-    OverflowMenuHorizontal,
-    ChevronLeft,
+    OverflowMenuHorizontal as OverflowMenuIcon,
+    ChevronLeft as ChevronLeftIcon,
   } from "carbon-icons-svelte"
-  import { linear } from "svelte/easing"
+  import { open } from "../lib/svelte-transitions"
 
   export let comment: (Comment & { isNew?: true }) | undefined = undefined
   export let showReply: string
@@ -92,30 +92,6 @@
 
     if (showReply !== comment.id) isOverflowToggled = false
   }
-
-  const toggleExpand = (
-    _overflowMenu: HTMLElement,
-    params?: {
-      delay: number
-      duration: number
-      easing: (t: number) => number
-      direction: "in" | "out" | "both"
-    }
-  ) => {
-    const { delay = 0, duration = 250, easing = linear } = params
-
-    const css = (t: number, u: number) => {
-      const maxWidth = (1 - u) * 100
-      return `max-width: ${maxWidth}%`
-    }
-
-    return {
-      delay,
-      duration,
-      easing,
-      css,
-    }
-  }
 </script>
 
 <li
@@ -178,7 +154,7 @@
       {#if isEditing}
         <CommentEdit
           placeholder="Your edit"
-          autofocus={isRoot ? true : false}
+          autofocus
           commentId={comment.id}
           commentText={comment.text}
           onCancel={onCancelEditClick}
@@ -192,7 +168,7 @@
       {#if showReply === comment.id && !isEditing}
         <CommentInput
           placeholder="Your reply"
-          autofocus={isRoot ? true : false}
+          autofocus
           commentId={comment.id}
           {currentUser}
           onCancel={onCloseCommentInput}
@@ -211,7 +187,7 @@
             <ReplyIcon size={20} /> Reply
           </button>
           {#if isOverflowToggled}
-            <div class="overflow-menu" in:toggleExpand out:toggleExpand>
+            <div class="overflow-menu" transition:open>
               {#if canEdit(comment)}
                 <button
                   on:click={() => onEditClick(comment)}
@@ -233,15 +209,15 @@
               {/if}
 
               <button on:click={() => (isOverflowToggled = false)}
-                ><ChevronLeft size={20} /></button
+                ><ChevronLeftIcon size={20} /></button
               >
             </div>
           {:else if canEdit(comment) || canDelete(comment)}
             <button
               on:click={() => (isOverflowToggled = true)}
               class="overflow-menu-button"
               title="Click '...' to see more options for this comment"
-              ><OverflowMenuHorizontal size={20} /></button
+              ><OverflowMenuIcon size={20} /></button
             >
           {/if}
         </div>

src/components/CommentInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import Login from "./Login.svelte"
   import SkeletonCommentInput from "./low-level/SkeletonCommentInput.svelte"
+  import { AddComment as AddCommentIcon } from "carbon-icons-svelte"
+  import { CloseOutline as CancelIcon } from "carbon-icons-svelte"
   import type {
     Comment,
     CommentId,
@@ -15,13 +17,16 @@
   import { postComment } from "../apiClient"
   import { useMachine } from "@xstate/svelte"
   import { LoginTab } from "../lib/simple-comment-types"
+  import { open } from "../lib/svelte-transitions"
   export let currentUser: User | undefined
   export let commentId: CommentId
   export let onCancel = null
   export let autofocus = false
   export let placeholder = "Your comment"
+  export let isRoot = false
 
   let commentText = ""
+  let hasEnteredComment = false
   let buttonCopy = "Add comment"
   let loginStateValue
   let textareaRef
@@ -165,6 +170,22 @@
     textAreaHeight = `${blockSize}px`
   })
 
+  const getMaxHeight = () => {
+    if (currentUser) return "10rem"
+    switch (loginTabSelect) {
+      case LoginTab.guest:
+        return "33rem"
+      case LoginTab.signup:
+        return "55rem"
+      case LoginTab.login:
+        return "33rem"
+
+      default:
+        console.error(`Unknown loginTabSelect: ${loginTabSelect}`)
+        return "10rem"
+    }
+  }
+
   onMount(() => {
     resizeObserver.observe(textareaRef)
   })
@@ -193,14 +214,21 @@
   ).includes($state.value)
 
   $: buttonCopy = getButtonCopy(loginTabSelect, commentText, loginStateValue)
+  $: hasEnteredComment = !!commentText?.length
 </script>
 
 <SkeletonCommentInput
   width={textAreaWidth}
   height={textAreaHeight}
   isHidden={!isProcessing}
 />
-<form class="comment-form" class:is-hidden={isProcessing} on:submit={onSubmit}>
+<form
+  class="comment-form"
+  class:is-hidden={isProcessing}
+  on:submit={onSubmit}
+  in:open={{ axis: "y", duration: 250, max: getMaxHeight() }}
+  out:open={{ axis: "y", delay: 250, duration: 125, max: getMaxHeight() }}
+>
   <!-- svelte-ignore a11y-autofocus -->
   <textarea
     class="comment-field"
@@ -211,15 +239,17 @@
     {placeholder}
     dir="auto"
   />
-  <Login {currentUser} />
-  {#if !currentUser || (commentText && commentText.length)}
-    <div class="button-row">
+  <Login {currentUser} isVisible={hasEnteredComment} />
+  {#if !currentUser || hasEnteredComment}
+    <div class="button-row comment-footer">
+      <button class="comment-submit-button" type="submit"
+        ><AddCommentIcon size={20} />{buttonCopy}</button
+      >
       {#if onCancel !== null}
         <button class="comment-cancel-button" type="button" on:click={onCancel}
-          >Cancel</button
+          ><CancelIcon size={20} />Cancel</button
         >
       {/if}
-      <button class="comment-submit-button" type="submit">{buttonCopy}</button>
     </div>
   {/if}
 </form>

src/components/DiscussionDisplay.svelte

@@ -186,6 +186,7 @@
   {#if showReply === discussionId}
     <CommentInput
       commentId={discussionId}
+      isRoot={true}
       {currentUser}
       on:posted={onCommentPosted}
     />

src/components/Login.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly } from "svelte/transition"
+  import { fade, fly } from "svelte/transition"
   import type {
     AdminSafeUser,
     ServerResponse,
@@ -56,6 +56,7 @@
   const USER_ID_HELPER_TEXT = "This is the user id that uniquely identifies you"
 
   export let currentUser: User | undefined
+  export let isVisible = false
 
   let self: User = currentUser
   let isError = false
@@ -682,7 +683,12 @@
   }
 </script>
 
-<section class="simple-comment-login" class:is-loading={!isLoaded}>
+<section
+  class="simple-comment-login"
+  class:is-loading={!isLoaded}
+  class:is-visible={isVisible}
+  transition:fade
+>
   {#if !self}
     <div class="selection-tabs button-row">
       <button

src/components/SelfDisplay.svelte

@@ -20,9 +20,8 @@
 
   $: {
     isProcessing =
-      loginStateValue === "verifying" ||
-      loginStateValue === "loggingIn" ||
-      loginStateValue === "loggingOut"
+      // loginStateValue === "verifying" ||
+      loginStateValue === "loggingIn" || loginStateValue === "loggingOut"
   }
   const onLogoutClick = (e: Event) => {
     e.preventDefault()

src/lib/svelte-transitions.ts

@@ -0,0 +1,40 @@
+import { linear } from "svelte/easing"
+
+export const open = (
+  _element: HTMLElement,
+  params?: {
+    delay?: number
+    duration?: number
+    easing?: (t: number) => number
+    direction?: "in" | "out" | "both"
+    axis?: "x" | "y"
+    max?: string
+  }
+) => {
+  const {
+    delay = 0,
+    duration = 250,
+    easing = linear,
+    axis = "x",
+    max = "100%",
+  } = params ?? {}
+
+  const [_, magnitude, unit] = max.match(/^(\d+\.?\d*)([a-zA-Z%]*)$/) ?? [
+    undefined,
+    "100",
+    "%",
+  ]
+
+  const css = (t: number, u: number) => {
+    const percent = (1 - u) * parseFloat(magnitude)
+    const dimension = axis === "x" ? "width" : "height"
+    return `max-${dimension}: ${percent}${unit}`
+  }
+
+  return {
+    delay,
+    duration,
+    easing,
+    css,
+  }
+}

src/scss/simple-comment-style.scss

@@ -301,7 +301,10 @@ $highlight-text-color: color.scale(
     margin-bottom: 5rem;
 
     form.comment-form {
+      overflow: hidden;
+      will-change: max-height;
       margin-bottom: 3rem;
+
       .comment-update-button {
         width: 12.5rem;
       }
@@ -537,7 +540,7 @@ $highlight-text-color: color.scale(
           }
         }
         &.is-rtl {
-          .comment-body {
+          > .comment-body {
             text-align: right;
           }
         }