v3 - custom string input with character count (#529)

* feat(studio): custom string input component with character count

Composes the default string input rendering with a simple character count. Initially only used in SEO fields, but can be later applied where applicable.

* feat(StringInputWithCharacterCount): max count

* feat(StringInputWithCharacterCount): use character count input for more string fields

* refactor(schema): rename Rule → rule in validation function

* feat(StringInputWithCharacterCount): handle plural form

* feat(StringInputWithCharacterCount): make maxCount required and show characters left

studio/components/stringInputWithCharacterCount/StringInputWithCharacterCount.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Text } from "@sanity/ui";
+import { StringInputProps } from "sanity";
+import styles from "./stringInputWithCharacterCount.module.css";
+
+type StringInputWithCharacterCountProps = StringInputProps & {
+  maxCount: number;
+};
+
+const SR_COUNT_HINT_ID = "string-input-with-character-count-input-info";
+
+export const StringInputWithCharacterCount = ({
+  maxCount,
+  ...defaultProps
+}: StringInputWithCharacterCountProps) => {
+  const characterCount = defaultProps.value?.length ?? 0;
+  const charactersLeft = maxCount - characterCount;
+  const isOverLimit = charactersLeft < 0;
+  const countText = `${Math.abs(charactersLeft)} character${charactersLeft !== 1 ? "s" : ""} ${isOverLimit ? "over limit" : charactersLeft === maxCount ? "allowed" : "left"}`;
+
+  return (
+    <Stack space={3}>
+      <Box>
+        {defaultProps.renderDefault({
+          ...defaultProps,
+          elementProps: {
+            ...defaultProps.elementProps,
+            "aria-describedby": `${defaultProps.elementProps["aria-describedby"]} ${SR_COUNT_HINT_ID}`,
+          },
+        })}
+      </Box>
+      <span id={SR_COUNT_HINT_ID} className={styles.srOnly}>
+        {`You can enter up to ${maxCount} character${charactersLeft !== 1 ? "s" : ""}`}
+      </span>
+      <Text
+        size={1}
+        muted
+        className={isOverLimit ? styles.overLimit : ""}
+        aria-live={"polite"}
+      >
+        {countText}
+      </Text>
+    </Stack>
+  );
+};

studio/components/stringInputWithCharacterCount/stringInputWithCharacterCount.module.css

@@ -0,0 +1,13 @@
+.srOnly {
+  /* visually hidden input to still receive focus and support screen readers */
+  /* https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#using_a_label_element_to_trigger_a_hidden_file_input_element */
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.overLimit {
+  color: rgb(203, 38, 24) !important;
+}

studio/schemas/builders/pageBuilder.ts

@@ -11,6 +11,7 @@ import testimonals from "../objects/sections/testimonials";
 import imageSection from "../objects/sections/image";
 import grid from "../objects/sections/grid";
 import contactForm from "../objects/sections/form";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export const pageBuilderID = "pageBuilder";
 
@@ -25,7 +26,11 @@ const pageBuilder = defineType({
       description:
         "Enter a distinctive name for the dynamic page to help content editors easily identify and manage it. This name is used internally and is not visible on your website.",
       type: "string",
-      validation: (Rule) => Rule.required().max(30),
+      validation: (rule) => rule.required().max(30),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 30 }),
+      },
     }),
     pageSlug,
     seo,

studio/schemas/documents/blog.ts

@@ -2,6 +2,7 @@ import { defineField, defineType } from "sanity";
 import seo from "../objects/seo";
 import { pageSlug } from "../schemaTypes/slug";
 import { title } from "../fields/text";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export const blogId = "blog";
 
@@ -16,7 +17,11 @@ const blog = defineType({
       description:
         "Enter a distinctive name for the page to help content editors easily identify and manage it. This name is used internally and is not visible on your website.",
       type: "string",
-      validation: (Rule) => Rule.required().max(30),
+      validation: (rule) => rule.required().max(30),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 30 }),
+      },
     }),
     pageSlug,
     seo,
@@ -28,7 +33,11 @@ const blog = defineType({
         "Enter the label used to refer to all posts regardless of their category. This label will be displayed in the filter section on the main blog page. Examples include 'news', 'stories', or 'posts'.",
       type: "string",
       initialValue: "All posts",
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required().max(20),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 20 }),
+      },
     }),
     defineField({
       name: "categories",
@@ -48,7 +57,11 @@ const blog = defineType({
               description:
                 "The name of the category. This will be displayed on the website and used for organizing blog posts.",
               type: "string",
-              validation: (Rule) => Rule.required().min(1).max(100),
+              validation: (rule) => rule.required().min(1).max(100),
+              components: {
+                input: (props) =>
+                  StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+              },
             }),
           ],
         }),

studio/schemas/documents/companyInfo.ts

@@ -1,5 +1,6 @@
 import { defineType, defineField } from "sanity";
 import seo from "../objects/seo";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export const companyInfoID = "companyInfo";
 
@@ -24,6 +25,11 @@ const companyInfo = defineType({
           type: "string",
           title: "Site Name",
           description: "The name of your website.",
+          validation: (rule) => rule.max(60),
+          components: {
+            input: (props) =>
+              StringInputWithCharacterCount({ ...props, maxCount: 60 }),
+          },
         }),
         defineField({
           name: "defaultLanguage",

studio/schemas/documents/companyLocation.ts

@@ -1,4 +1,5 @@
 import { defineField, defineType } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export const companyLocationID = "companyLocation";
 export const companyLocationNameID = "companyLocationName";
@@ -13,6 +14,11 @@ const companyLocation = defineType({
       name: companyLocationNameID,
       type: "string",
       title: "Location",
+      validation: (rule) => rule.max(50),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 50 }),
+      },
     }),
   ],
 });

studio/schemas/documents/navigationManager.ts

@@ -36,8 +36,8 @@ const navigationManager = defineType({
         "Add links to the main menu. These links will appear at the top of your website and help visitors navigate to important sections. The first Call to Action (CTA) will be styled as a primary link button. Note: The order in which you add the links here is how they will be displayed on the website.",
       type: "array",
       of: [{ type: linkID }, { type: callToActionFieldID }],
-      validation: (Rule) =>
-        Rule.custom((links) => {
+      validation: (rule) =>
+        rule.custom((links) => {
           if (!Array.isArray(links)) return true;
           const ctaCount = links.filter(
             (link) => link._type === callToActionFieldID,

studio/schemas/documents/post.ts

@@ -20,8 +20,8 @@ const posts = defineType({
       description: "Select the date and time when this post will be published.",
       type: "datetime",
       initialValue: () => new Date().toISOString(),
-      validation: (Rule) =>
-        Rule.required().custom((date, context) => {
+      validation: (rule) =>
+        rule.required().custom((date, context) => {
           // Ensure date is not undefined or null
           if (!date) return "The publish date is required.";
 
@@ -57,7 +57,7 @@ const posts = defineType({
       components: {
         input: CategorySelector,
       },
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required(),
     }),
     defineField({
       name: "lead",
@@ -69,15 +69,15 @@ const posts = defineType({
         defineField({
           ...richText,
           description: "Enter the introductory text for the post.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         }),
         defineField({
           ...image,
           description: "Upload a featured image for the post.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         }),
       ],
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required(),
     }),
     defineField({
       ...richText,

studio/schemas/fields/categories.ts

@@ -1,4 +1,5 @@
-import { defineField } from "sanity";
+import { defineField, StringInputProps } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export const categoriesId = "categories";
 
@@ -11,7 +12,11 @@ const categories = defineField({
       name: "category",
       type: "string",
       title: "Category",
-      validation: (Rule) => Rule.required().min(1).max(100),
+      validation: (rule) => rule.required().min(1).max(100),
+      components: {
+        input: (props: StringInputProps) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+      },
     },
   ],
 });

studio/schemas/fields/media.ts

@@ -1,4 +1,5 @@
-import { defineField } from "sanity";
+import { defineField, StringInputProps } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 export enum ImageAlignment {
   Left = "left",
@@ -15,20 +16,25 @@ const alignmentOptions = [
   { title: "Right", value: ImageAlignment.Right },
 ];
 
+const imageAltField = defineField({
+  name: "alt",
+  type: "string",
+  title: "Alternative Text",
+  description:
+    "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
+  validation: (rule) => rule.max(100),
+  components: {
+    input: (props: StringInputProps) =>
+      StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+  },
+});
+
 const image = defineField({
   name: "image",
   title: "Image",
   type: "image",
   options: { hotspot: true },
-  fields: [
-    {
-      name: "alt",
-      type: "string",
-      title: "Alternative Text",
-      description:
-        "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
-    },
-  ],
+  fields: [imageAltField],
 });
 
 export const imageExtended = defineField({
@@ -37,13 +43,7 @@ export const imageExtended = defineField({
   type: "image",
   options: { hotspot: true },
   fields: [
-    {
-      name: "alt",
-      type: "string",
-      title: "Alternative Text",
-      description:
-        "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
-    },
+    imageAltField,
     {
       name: "imageAlignment",
       title: "Image Alignment",

studio/schemas/fields/text.ts

@@ -1,4 +1,5 @@
 import { StringRule, defineField } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/stringInputWithCharacterCount/StringInputWithCharacterCount";
 
 enum titleID {
   basic = "basicTitle",
@@ -22,8 +23,8 @@ const createField = ({
   isRequired = false,
   maxLength = 60,
 }: CreateFieldProps) => {
-  const validationRules = (Rule: StringRule) => {
-    let rules = Rule.max(maxLength);
+  const validationRules = (rule: StringRule) => {
+    let rules = rule.max(maxLength);
     if (isRequired) {
       rules = rules.required();
     }
@@ -35,6 +36,10 @@ const createField = ({
     title,
     type: "string",
     validation: validationRules,
+    components: {
+      input: (props) =>
+        StringInputWithCharacterCount({ ...props, maxCount: maxLength }),
+    },
   });
 };
 
@@ -53,7 +58,10 @@ export const optionalSubtitle = defineField({
   name: subtitleID.optional,
   title: "Subtitle",
   type: "string",
-  validation: (Rule) => Rule.max(60),
+  validation: (rule) => rule.max(60),
+  components: {
+    input: (props) => StringInputWithCharacterCount({ ...props, maxCount: 60 }),
+  },
 });
 
 export const richTextID = "richText";

studio/schemas/objects/compensations/benefitsByLocation.ts

@@ -28,7 +28,7 @@ const benefitType = defineField({
     layout: BENEFIT_TYPES.length > 5 ? "dropdown" : "radio",
   },
   initialValue: BENEFIT_TYPE_BASIC_VALUE,
-  validation: (Rule) => Rule.required(),
+  validation: (rule) => rule.required(),
 });
 
 export const benefitsByLocation = defineField({
@@ -45,7 +45,7 @@ export const benefitsByLocation = defineField({
           ...location,
           description:
             "Select the office location for which you are entering benefits information. Each location must be unique.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         },
         defineField({
           name: "benefits",
@@ -93,8 +93,8 @@ export const benefitsByLocation = defineField({
       },
     },
   ],
-  validation: (Rule) =>
-    Rule.custom((benefitsByLocation) => {
+  validation: (rule) =>
+    rule.custom((benefitsByLocation) => {
       const isNotDuplicate: boolean = checkForDuplicateLocations(
         benefitsByLocation as DocumentWithLocation[] | undefined,
       );