feat(form): FormMessageCounter component added to public API

Author: mlaursen

packages/form/src/FormMessage.tsx

@@ -3,6 +3,7 @@ import cn from "classnames";
 import { bem } from "@react-md/utils";
 
 import { FormTheme, useFormTheme } from "./FormThemeProvider";
+import { FormMessageCounter } from "./FormMessageCounter";
 
 const block = bem("rmd-form-message");
 
@@ -81,8 +82,12 @@ export interface FormMessageProps
  * ```
  *
  * Note: this should not be used alongside form-level messages.
+ *
+ * @remarks \@since 2.9.0 Renamed from `FormMessageCounterProps` to
+ * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component
+ * was added
  */
-export interface FormMessageCounterProps {
+export interface FormMessageInputLengthCounterProps {
   /**
    * The current length of the value in the related text field.
    */
@@ -106,7 +111,7 @@ export interface FormMessageCounterProps {
 
 export interface FormMessageWithCounterProps
   extends FormMessageProps,
-    FormMessageCounterProps {}
+    FormMessageInputLengthCounterProps {}
 
 /**
  * The `FormMessage` component is used to create additional helper messages or
@@ -119,7 +124,7 @@ export interface FormMessageWithCounterProps
  */
 export const FormMessage = forwardRef<
   HTMLDivElement,
-  FormMessageProps & Partial<FormMessageCounterProps>
+  FormMessageProps & Partial<FormMessageInputLengthCounterProps>
 >(function FormMessage(
   {
     id,
@@ -170,13 +175,13 @@ export const FormMessage = forwardRef<
     >
       {message}
       {typeof length === "number" && typeof maxLength === "number" && (
-        <span
+        <FormMessageCounter
           id={`${id}-counter`}
           style={counterStyle}
-          className={cn(block("counter"), counterClassName)}
+          className={counterClassName}
         >
           {`${length} / ${maxLength}`}
-        </span>
+        </FormMessageCounter>
       )}
     </div>
   );

packages/form/src/FormMessageCounter.tsx

@@ -0,0 +1,60 @@
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+import cn from "classnames";
+import { bem } from "@react-md/utils";
+
+const block = bem("rmd-form-message");
+
+/** @remarks \@since 2.9.0 */
+export interface FormMessageCounterProps
+  extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The children to display in the counter. This is normally a string like:
+   *
+   * @example
+   * String Example
+   * ```ts
+   * `${min} / ${max}`
+   * ```
+   */
+  children: ReactNode;
+}
+
+/**
+ * This component can be used to create a "counter" within the
+ * {@link FormMessage} component.
+ *
+ * Note: This is really only useful when using the {@link FormMessage} component
+ * without a {@link TextField}.
+ *
+ * @example
+ * Example Usage
+ * ```ts
+ * interface ExampleProps {
+ *   min: number;
+ *   max: number;
+ * }
+ *
+ * function Example({ min, max }: ExampleProps) {
+ *   return (
+ *     <FormMessage disableWrap>
+ *       <FormMessageCounter>
+ *         {`${min} / ${max}`}
+ *       </FormMessageCounter>
+ *     </FormMessage>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.9.0
+ */
+export function FormMessageCounter({
+  children,
+  className,
+  ...props
+}: FormMessageCounterProps): ReactElement {
+  return (
+    <span {...props} className={cn(block("counter"), className)}>
+      {children}
+    </span>
+  );
+}

packages/form/src/index.ts

@@ -6,6 +6,7 @@ export * from "./Fieldset";
 export * from "./FormThemeProvider";
 export * from "./FormMessage";
 export * from "./FormMessageContainer";
+export * from "./FormMessageCounter";
 
 export * from "./file-input";
 export * from "./label";

packages/form/src/text-field/useTextField.ts

@@ -11,7 +11,10 @@ import {
 } from "react";
 import { useIcon } from "@react-md/icon";
 
-import { FormMessageCounterProps, FormMessageProps } from "../FormMessage";
+import {
+  FormMessageInputLengthCounterProps,
+  FormMessageProps,
+} from "../FormMessage";
 import { defaultGetErrorIcon, GetErrorIcon } from "./getErrorIcon";
 import {
   ChangeValidationBehavior,
@@ -157,7 +160,7 @@ export interface TextFieldHookOptions
 export interface ProvidedFormMessageProps
   extends Pick<FormMessageProps, "id" | "theme" | "children">,
     Required<Pick<TextFieldProps, "error">>,
-    Partial<Pick<FormMessageCounterProps, "length" | "maxLength">> {}
+    Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {}
 
 /**
  * All the props that will be generated and returned by the `useTextField` hook