@madie/madie-design-system 1.2.95 → 1.2.97

package/.storybook/main.js

@@ -13,7 +13,6 @@ module.exports = {
         "@storybook/addon-docs",
         "@storybook/addon-backgrounds",
         "@storybook/addon-viewport",
-        "@storybook/addon-postcss",
         "@storybook/addon-webpack5-compiler-babel"
     ],
 

package/components/MadieTooltip/index.jsx

@@ -27,7 +27,13 @@ const MadieToolTip =
           }}
               {...rest}
         >
-              <div style={{ width: widthContainer, height: heightContainer}} data-testId={id} id={id}>
+              <div
+                aria-describedby={id} 
+                tabIndex={0}
+                style={{ width: widthContainer, height: heightContainer}}
+                data-testId={id} 
+                id={id}
+              >
                 <TooltipIcon />
               </div>
             </Tooltip>

package/components/RichTextEditor/index.jsx

@@ -3,12 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { EditorContent, useEditor } from "@tiptap/react";
 import InputLabel from "../InputLabel";
-
-import Gapcursor from "@tiptap/extension-gapcursor";
-import Table from "@tiptap/extension-table";
-import TableCell from "@tiptap/extension-table-cell";
-import TableHeader from "@tiptap/extension-table-header";
-import TableRow from "@tiptap/extension-table-row";
+import { Gapcursor } from "@tiptap/extensions";
+import {
+Table,
+TableCell,
+TableHeader,
+TableRow,
+} from "@tiptap/extension-table";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 import { IconButton, FormHelperText } from "@mui/material";

package/components/TextField/TextField.stories.js

@@ -212,6 +212,25 @@ export const TextfieldDifferentLabel = () => (
             inputProps={{ "data-testid": "measure-name-input" }}
             data-testid="measure-name-text-field"
             size="small"
+            value="This is a test value"
+            maxLength={500}
+        />
+    </Wrapper>
+);
+
+export const TextFieldWithRecommendationText = () => (
+    <Wrapper>
+        <TextField
+            placeholder="Placeholder"
+            label="With recommendation text"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            value="This is a test value"
+            maxLength={500}
+            helperText="Must contain at least one letter and must not contain special characters and underscores"
+            recommendation="Strongly recommend to have under 30 characters"
         />
     </Wrapper>
 );

package/components/TextField/index.jsx

@@ -22,6 +22,7 @@ const TextField = ({
     labelColor = undefined,
     textFieldStyles = {},
     maxLength = undefined,
+    recommendation = undefined,
     ...rest
 }) => {
     if (readOnly) {
@@ -35,24 +36,31 @@ const TextField = ({
             />
         );
     }
+    const showMaxLength = Boolean(maxLength) && !disabled;
+    const showRecommendation = Boolean(recommendation) && !disabled;
     // get a copy of input props
     const newInputProps = { ...inputProps } || {};
 
     if (!newInputProps["data-testid"]) {
         newInputProps["data-testid"] = `${id}-input`;
     }
-    // if aria-describedBy is not provided, add it depending on helper-text and tooltip presence
-    if (!newInputProps["aria-describedby"]) {
-        let newDescribedBy = "";
-        if (helperText) {
-            newDescribedBy += `${id}-helper-text `;
-        }
-        if (tooltipText) {
-            newDescribedBy += `${id}-tooltip`;
-        }
-        if (newDescribedBy) {
-            newInputProps["aria-describedby"] = newDescribedBy;
-        }
+    // Build aria-describedby ids so helper, tooltip, and recommendation are announced on input focus.
+    const describedByIds = new Set(
+        `${newInputProps["aria-describedby"] || ""}`
+            .split(/\s+/)
+            .filter(Boolean)
+    );
+    if (helperText) {
+        describedByIds.add(`${id}-helper-text`);
+    }
+    if (tooltipText) {
+        describedByIds.add(`${id}-tooltip`);
+    }
+    if (showRecommendation) {
+        describedByIds.add(`${id}-recommendation-text`);
+    }
+    if (describedByIds.size) {
+        newInputProps["aria-describedby"] = Array.from(describedByIds).join(" ");
     }
 
     const extendedTextFieldStyles = {
@@ -89,6 +97,7 @@ const TextField = ({
         },
         ...textFieldStyles,
     };
+
     return (
         <FormControl fullWidth error={error}>
             <div
@@ -187,19 +196,56 @@ const TextField = ({
                 }}
                 {...rest}
             />
-            {maxLength && !disabled && (
-                <span
+
+            {(showRecommendation || showMaxLength) && (
+                <div
                     style={{
-                        fontFamily: "Rubik",
-                        fontSize: 12,
-                        color: "#717171",
-                        position: "absolute",
-                        bottom: -26,
-                        right: 0,
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        gap: 8,
+                        marginTop: 4,
+                        width: "100%",
                     }}
                 >
-                    {rest.value?.length}/{maxLength} Characters
-                </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                        {showRecommendation && (
+                            <FormHelperText
+                                aria-live="polite"
+                                id={`${id}-recommendation-text`}
+                                data-testid={`${id}-recommendation-text`}
+                                sx={[
+                                    {
+                                        margin: 0,
+                                        color: "#515151",
+                                        lineHeight: 1.2,
+                                        overflowWrap: "anywhere",
+                                    },
+                                    error && {
+                                        color: "#AE1C1C !important",
+                                    },
+                                ]}
+                            >
+                                {recommendation}
+                            </FormHelperText>
+                        )}
+                    </div>
+
+                    {showMaxLength && (
+                        <span
+                            style={{
+                                fontFamily: "Rubik",
+                                fontSize: 12,
+                                color: "#717171",
+                                whiteSpace: "nowrap",
+                                flexShrink: 0,
+                                alignSelf: "flex-start",
+                            }}
+                        >
+                            {rest.value?.length}/{maxLength} Characters
+                        </span>
+                    )}
+                </div>
             )}
         </FormControl>
     );
@@ -219,5 +265,6 @@ TextField.propTypes = {
     inputProps: PropTypes.object,
     labelColor: PropTypes.string,
     maxLength: PropTypes.number,
+    recommendation: PropTypes.string,
 };
 export default TextField;