@madie/madie-design-system 1.0.36 → 1.0.38

package/components/AutoComplete/AutoComplete.jsx

@@ -12,6 +12,7 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 
 const autoCompleteStyles = {
+    marginTop: "8px",
     borderRadius: "3px",
     height: 40,
     border: "1px solid #DDDDDD",
@@ -82,16 +83,68 @@ const AutoComplete = ({
 }) => {
     return (
         <FormControl error={error} fullWidth>
+            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
             <InputLabel
                 htmlFor={`${id}`}
                 id={`${id}-label`}
                 disabled={disabled}
                 required={required}
                 shrink
-                error={error}
+                style={{marginBottom: 0, height: 16}} // force a heignt
+                sx={[
+                {
+                    backgroundColor: "transparent",
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    alignSelf: "baseline",
+                    textTransform: "none",
+                    // force it outside the select box
+                    position: "initial",
+                    transform: "translateX(0px) translateY(0px)",
+                    fontFamily: "Rubik",
+                    fontWeight: 500,
+                    fontSize: 14,
+                    color: "#333",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#AE1C1C !important",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                required && {
+                    transform: "translateX(-12px) translateY(0px)",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#D92F2",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                disabled && {
+                    color: "rgba(0,0,0,0.6)",
+                },
+                error && {
+                    color: "#AE1C1C !important",
+                },
+            ]}
             >
                 {label}
             </InputLabel>
+            {helperText && (<FormHelperText
+                    tabIndex={0}
+                    aria-live="polite"
+                    id={`${id}-helper-text`}
+                    data-testid={`${id}-helper-text`}
+                    error={error}
+                    sx={[{
+                        margin: "4px 0px 0px 0px",
+                        color: "#515151",
+                        lineHeight: 1
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
+                >
+                    {helperText}
+                </FormHelperText>)}
             <MUIAutoComplete
                 disablePortal
                 id={id}
@@ -147,20 +200,6 @@ const AutoComplete = ({
                     onChange(id, selectedVal || "")
                 }
             />
-            {helperText && (
-                <FormHelperText
-                    tabIndex={0}
-                    aria-live="polite"
-                    id={`${id}-helper-text`}
-                    data-testid={`${id}-helper-text`}
-                    error={error}
-                    sx={ error &&
-                        { color: "#AE1C1C !important" }
-                    }
-                >
-                    {helperText}
-                </FormHelperText>
-            )}
         </FormControl>
     );
 };

package/components/AutoComplete/AutoComplete.stories.js

@@ -96,3 +96,16 @@ AutoCompleteMultipleWithError.args = {
     helperText: "At least one field is required",
     error: true,
 };
+
+
+export const AutoCompleteWithVariableHeights = () => {
+    return (
+        <div className="qpp-u-padding--16">
+            <div style={{display: "flex", flexDirection: "row", flexGrow: 1}}>
+                <TemplateMultipleSelect placeholder="test" required={true} helperText="test"/>
+                <TemplateMultipleSelect placeholder="test" required={true} helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "/>
+                <TemplateMultipleSelect placeholder="test" required={true} helperText="test"/>
+            </div>
+        </div>
+    );
+};

package/components/Select/Select.stories.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { withKnobs } from "@storybook/addon-knobs";
 import Select from "./index";
-import { MenuItem } from "@mui/material";
+import { MenuItem, Box } from "@mui/material";
 
 export default {
     title: "Select",
@@ -11,7 +11,7 @@ export default {
 };
 
 const Wrapper = ({ children }) => (
-    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+    <div className="qpp-u-padding--16" style={{ width: 300, marginBottom: "16px" }} >
         {children}
     </div>
 );
@@ -139,7 +139,7 @@ export const Error = () => (
             inputProps={{ "data-testid": "measure-name-input" }}
             data-testid="measure-name-text-field"
             size="small"
-            helperText="An error message"
+            helperText="An error message An error message An error message"
             options={options.map(({ key, value, testId, name }) => {
                 return (
                     <MenuItem
@@ -154,3 +154,79 @@ export const Error = () => (
         />
     </Wrapper>
 );
+
+
+
+export const VariedHeights = () => (
+    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
+        <Box sx={{display: "flex",
+                flexDirection: "row"}}>
+        <Select
+            error
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message"
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+        <Select
+            // error
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText=""
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+        <Select
+            // error
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+        </Box>
+    </div>
+)

package/components/Select/index.jsx

@@ -5,42 +5,6 @@ import InputLabel from "../InputLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import PropTypes from "prop-types";
 
-const selectStyles = {
-    borderRadius: "3px",
-    height: 40, //there's a .13 coming from somewhere.
-    border: "1px solid #DDDDDD",
-    // remove weird line break from legend
-    "& .MuiOutlinedInput-notchedOutline": {
-        borderRadius: "3px",
-        "& legend": {
-            width: 0,
-        },
-    },
-    "& .MuiOutlinedInput-root": {
-        "&&": {
-            borderRadius: "3px",
-        },
-    },
-    // input base selector
-    "& .MuiInputBase-input": {
-        color: "#333",
-        fontFamily: "Rubik",
-        fontSize: 14,
-        borderRadius: "3px",
-        padding: "9px 14px",
-        "&::placeholder": {
-            color: "#717171"
-        },
-    },
-    "& 	.MuiSelect-icon": {
-        color: "#323232",
-    },
-    "& .Mui-disabled" : {
-        backgroundColor: "#EDEDED",
-        border: "#EDEDED",
-    }
-}
-
 const Select = ({
     placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
     required = false,
@@ -67,16 +31,110 @@ const Select = ({
     );
     return (
         <FormControl error={error} fullWidth>
+            {/* to deal with multiple height helper text in a single row*/}
+            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
             <InputLabel
+                // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}
                 id={`${id}-label`}
                 disabled={disabled}
                 required={required}
                 shrink
+                style={{marginBottom: 0, height: 16}} // force a heignt
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        display: "flex",
+                        flexDirection: "row-reverse",
+                        alignSelf: "baseline",
+                        textTransform: "none",
+                        // force it outside the select box
+                        position: "initial",
+                        transform: "translateX(0px) translateY(0px)",
+                        fontFamily: "Rubik",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#AE1C1C !important",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    required && {
+                        transform: "translateX(-12px) translateY(0px)",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#D92F2",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    disabled && {
+                        color: "rgba(0,0,0,0.6)",
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
             >
                 {label}
             </InputLabel>
+                {helperText && (<FormHelperText
+                    tabIndex={0}
+                    aria-live="polite"
+                    data-testid={`${id}-helper-text`}
+                    id={`${id}-helper-text`}
+                    sx={[{
+                        margin: "4px 0px 0px 0px",
+                        color: "#515151", 
+                        lineHeight: 1
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
+                >
+                    {helperText}
+                </FormHelperText>)}
             <MUISelect
-                sx={selectStyles}
+                sx={[{
+                    borderRadius: "3px",
+                    height: 40,
+                    border: "1px solid #DDDDDD",
+                    marginTop: "8px",
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderRadius: "3px",
+                        "& legend": {
+                            width: 0,
+                        },
+                    },
+                    "& .MuiOutlinedInput-root": {
+                        "&&": {
+                            borderRadius: "3px",
+                        },
+                    },
+                    // input base selector
+                    "& .MuiInputBase-input": {
+                        color: "#333",
+                        fontFamily: "Rubik",
+                        fontSize: 14,
+                        borderRadius: "3px",
+                        padding: "9px 14px",
+                        "&::placeholder": {
+                            color: "#717171"
+                        },
+                    },
+                    "& 	.MuiSelect-icon": {
+                        color: "#323232",
+                    },
+                    "& .Mui-disabled" : {
+                        backgroundColor: "#EDEDED",
+                        border: "#EDEDED",
+                    }},
+                    error && {
+                        "& .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "#AE1C1C !important",
+                        },
+                    },
+                ]
+                }
                 displayEmpty
                 IconComponent={ExpandMoreIcon}
                 disabled={disabled}
@@ -96,14 +154,6 @@ const Select = ({
             >
                 {options && options}
             </MUISelect>
-            {helperText && (
-                <FormHelperText
-                    data-testid={`helper-text`}
-                    id={`${id}-helper-text`}
-                >
-                    {helperText}
-                </FormHelperText>
-            )}
         </FormControl>
     );
 };

package/components/TextField/TextField.stories.js

@@ -89,11 +89,44 @@ export const Error = () => (
             inputProps={{ "data-testid": "measure-name-input" }}
             data-testid="measure-name-text-field"
             size="small"
-            helperText={
-                <FormHelperText data-testid={`helper-text`} error={true}>
-                    An error message
-                </FormHelperText>
-            }
+            helperText="An error message"
         />
     </Wrapper>
 );
+
+export const VariedHeights = () => (
+    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
+        <div style={{display: "flex",
+                flexDirection: "row"}}>
+                    <TextField
+            placeholder="Placeholder"
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message"
+        />
+        <TextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
+        />
+        <TextField
+            placeholder="Placeholder"
+            error
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message"
+        />
+        </div>
+    </div>)

package/components/TextField/index.jsx

@@ -18,20 +18,73 @@ const TextField = ({
 }) => {
     return (
         <FormControl fullWidth error={error}>
+            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
             <InputLabel
                 disabled={disabled}
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
+                style={{marginBottom: 0, height: 16}} // force a heignt
+                sx={[
+                {
+                    backgroundColor: "transparent",
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    alignSelf: "baseline",
+                    textTransform: "none",
+                    // force it outside the select box
+                    position: "initial",
+                    transform: "translateX(0px) translateY(0px)",
+                    fontFamily: "Rubik",
+                    fontWeight: 500,
+                    fontSize: 14,
+                    color: "#333",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#AE1C1C !important",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                required && {
+                    transform: "translateX(-12px) translateY(0px)",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#D92F2",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                disabled && {
+                    color: "rgba(0,0,0,0.6)",
+                },
+                error && {
+                    color: "#AE1C1C !important",
+                },
+            ]}
             >
                 {label}
             </InputLabel>
+            { helperText && (<FormHelperText
+                tabIndex={0}
+                aria-live="polite"
+                id={`${id}-helper-text`}
+                data-testid={`${id}-helper-text`}
+                sx={[{
+                    margin: "4px 0px 0px 0px",
+                    color: "#515151", 
+                    lineHeight: 1
+                },
+                error && {
+                    color: "#AE1C1C !important",
+                },
+            ]}
+                    >
+                {helperText}
+            </FormHelperText>)}
             <MUITextField
-                sx={{
+                sx={[{
                     borderRadius: "3px",
                     height: 40, //there's a .13 coming from somewhere.
                     border: "1px solid #DDDDDD",
+                    marginTop: "8px",
                     // remove weird line break from legend
                     "& .MuiOutlinedInput-notchedOutline": {
                         borderRadius: "3px",
@@ -52,19 +105,22 @@ const TextField = ({
                         borderRadius: "3px",
                         padding: "9px 14px",
                         "&::placeholder": {
+                            opacity: 1,
                             color: "#717171"
                         },
                     },
-                }}
+                },
+                error && {
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#AE1C1C !important",
+                    },
+                }]}
                 label={null}
                 error={error}
                 disabled={disabled}
                 id={id}
                 {...rest}
             />
-            <FormHelperText id={`${id}-helper-text`}>
-                {helperText && helperText}
-            </FormHelperText>
         </FormControl>
     );
 };