Merge pull request #479 from zendesk/gianluca/errors-visual-fix

fix: ui fixes for WYSIWYG and Datepicker error states

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@types/dompurify": "3.0.2",
-    "@zendesk/help-center-wysiwyg": "file:zendesk-help-center-wysiwyg-v0.0.1.tgz",
+    "@zendesk/help-center-wysiwyg": "file:zendesk-help-center-wysiwyg-v0.0.2.tgz",
     "@zendeskgarden/container-grid": "^3.0.6",
     "@zendeskgarden/react-accordions": "8.70.1",
     "@zendeskgarden/react-buttons": "8.70.1",

src/modules/new-request-form/fields/DatePicker.tsx

@@ -10,13 +10,19 @@ import { Span } from "@zendeskgarden/react-typography";
 import type { Field } from "../data-types";
 import type { ChangeEventHandler } from "react";
 import { useState } from "react";
+import styled from "styled-components";
 
 interface DatePickerProps {
   field: Field;
   locale: string;
   valueFormat: "date" | "dateTime";
 }
 
+// Workaround for Message component not adding margin-top after the Datepicker
+const StyledMessage = styled(Message)`
+  margin-top: ${(props) => props.theme.space.xs};
+`;
+
 export function DatePicker({
   field,
   locale,
@@ -61,9 +67,14 @@ export function DatePicker({
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
       )}
       <GardenDatepicker value={date} onChange={handleChange} locale={locale}>
-        <Input required={required} lang={locale} onChange={handleInputChange} />
+        <Input
+          required={required}
+          lang={locale}
+          onChange={handleInputChange}
+          validation={error ? "error" : undefined}
+        />
       </GardenDatepicker>
-      {error && <Message validation="error">{error}</Message>}
+      {error && <StyledMessage validation="error">{error}</StyledMessage>}
       <input type="hidden" name={name} value={formatDate(date)} />
     </GardenField>
   );

src/modules/new-request-form/fields/textarea/TextArea.tsx

@@ -8,6 +8,7 @@ import {
 import { Span } from "@zendeskgarden/react-typography";
 import type { Field } from "../../data-types";
 import { useWysiwyg } from "./useWysiwyg";
+import styled from "styled-components";
 
 interface TextAreaProps {
   field: Field;
@@ -19,6 +20,18 @@ interface TextAreaProps {
   onChange: (value: string) => void;
 }
 
+const StyledField = styled(GardenField)`
+  .ck.ck-editor {
+    margin-top: ${(props) => props.theme.space.xs};
+  }
+`;
+
+const StyledMessage = styled(Message)`
+  .ck.ck-editor + & {
+    margin-top: ${(props) => props.theme.space.xs};
+  }
+`;
+
 export function TextArea({
   field,
   hasWysiwyg,
@@ -38,7 +51,7 @@ export function TextArea({
   });
 
   return (
-    <GardenField>
+    <StyledField>
       <Label>
         {label}
         {required && <Span aria-hidden="true">*</Span>}
@@ -56,7 +69,7 @@ export function TextArea({
         rows={6}
         isResizable
       />
-      {error && <Message validation="error">{error}</Message>}
-    </GardenField>
+      {error && <StyledMessage validation="error">{error}</StyledMessage>}
+    </StyledField>
   );
 }

yarn.lock

@@ -3904,35 +3904,9 @@
     "@typescript-eslint/types" "6.5.0"
     eslint-visitor-keys "^3.4.1"
 
-"@zendesk/help-center-wysiwyg@file:zendesk-help-center-wysiwyg-v0.0.1.tgz":
-  version "0.0.1"
-  resolved "file:zendesk-help-center-wysiwyg-v0.0.1.tgz#ec8fb07f520c2847095934ac389aefdfd0f1990b"
-  dependencies:
-    "@ckeditor/ckeditor5-basic-styles" "41.3.0"
-    "@ckeditor/ckeditor5-block-quote" "41.3.0"
-    "@ckeditor/ckeditor5-code-block" "41.3.0"
-    "@ckeditor/ckeditor5-dev-utils" "37.0.1"
-    "@ckeditor/ckeditor5-dev-webpack-plugin" "31.1.13"
-    "@ckeditor/ckeditor5-editor-classic" "41.3.0"
-    "@ckeditor/ckeditor5-essentials" "41.3.0"
-    "@ckeditor/ckeditor5-heading" "41.3.0"
-    "@ckeditor/ckeditor5-image" "41.3.0"
-    "@ckeditor/ckeditor5-inspector" "4.1.0"
-    "@ckeditor/ckeditor5-link" "41.3.0"
-    "@ckeditor/ckeditor5-list" "41.3.0"
-    "@ckeditor/ckeditor5-mention" "41.3.0"
-    "@ckeditor/ckeditor5-paragraph" "41.3.0"
-    "@ckeditor/ckeditor5-paste-from-office" "41.3.0"
-    "@ckeditor/ckeditor5-theme-lark" "41.3.0"
-    "@ckeditor/ckeditor5-typing" "41.3.0"
-    "@zendeskgarden/css-variables" "6.4.6"
-    "@zendeskgarden/svg-icons" "7.0.0"
-    babel-loader "9.1.3"
-    lodash.debounce "4.0.8"
-
-"@zendesk/help-center-wysiwyg@zendesk/help-center-wysiwyg.git#luis.wip_dist":
-  version "0.0.1"
-  resolved "git+ssh://git@github.com/zendesk/help-center-wysiwyg.git#5812207b611ec03f4c3dc33ed1cdfe4c4ed8abae"
+"@zendesk/help-center-wysiwyg@file:zendesk-help-center-wysiwyg-v0.0.2.tgz":
+  version "0.0.2"
+  resolved "file:zendesk-help-center-wysiwyg-v0.0.2.tgz#3352d3c59b37ce3dec19c361eeaf8d68f0347847"
   dependencies:
     "@ckeditor/ckeditor5-basic-styles" "41.3.0"
     "@ckeditor/ckeditor5-block-quote" "41.3.0"
@@ -6658,9 +6632,9 @@ electron-to-chromium@^1.4.535:
   integrity sha512-t2ZP4AcGE0iKCCQCBx/K2426crYdxD3YU6l0uK2EO3FZH0pbC4pFz/sZm2ruZsND6hQBTcDWWlo/MLpiOdif5g==
 
 electron-to-chromium@^1.4.668:
-  version "1.4.746"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.746.tgz#787213e75f6c7bccb55dfe8b68170555c548d093"
-  integrity sha512-jeWaIta2rIG2FzHaYIhSuVWqC6KJYo7oSBX4Jv7g+aVujKztfvdpf+n6MGwZdC5hQXbax4nntykLH2juIQrfPg==
+  version "1.4.749"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.749.tgz#9869e2e258141da26a2272b58264584c3461279d"
+  integrity sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q==
 
 emittery@^0.13.1:
   version "0.13.1"
@@ -13416,7 +13390,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13535,7 +13518,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -14695,7 +14685,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14713,6 +14703,15 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"