Add format tip for text attribute rows (#2340)

* Add format tip for text attribute rows

* Update changelog with added attribute tip

* Update attributes test snapshots

* Update question-help icons for dark mode

CHANGELOG.md

@@ -16,7 +16,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Enable save button on discount pages - #2319 by @orzechdev
 - Enable save button on page pages - #2325 by @orzechdev
 - Fix pagination errors on voucher and sale pages - #2317 by @orzechdev
-
+- Add format tip for text attribute rows - #2340 by @orzechdev
 
 ## 3.4
 

src/channels/components/ChannelAllocationStrategy/styles.ts

@@ -7,7 +7,7 @@ export const useStyles = makeStyles(
       marginBottom: theme.spacing(),
     },
     tooltipIcon: {
-      fill: "#28234A",
+      fill: theme.palette.type === "dark" ? "#FAFAFA" : "#28234A",
       fillOpacity: 0.6,
       "&:hover": {
         fillOpacity: 1,

src/components/Attributes/AttributeRow.tsx

@@ -1,4 +1,5 @@
 import { InputAdornment, TextField } from "@material-ui/core";
+import { inputTypeMessages } from "@saleor/attributes/components/AttributeDetails/messages";
 import { getMeasurementUnitMessage } from "@saleor/attributes/components/AttributeDetails/utils";
 import BasicAttributeRow from "@saleor/components/Attributes/BasicAttributeRow";
 import ExtendedAttributeRow from "@saleor/components/Attributes/ExtendedAttributeRow";
@@ -126,7 +127,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       );
     case AttributeInputTypeEnum.PLAIN_TEXT:
       return (
-        <BasicAttributeRow label={attribute.label}>
+        <BasicAttributeRow
+          label={attribute.label}
+          description={intl.formatMessage(inputTypeMessages.plainText)}
+        >
           <TextField
             fullWidth
             disabled={disabled}
@@ -149,7 +153,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       } = richTextGetters;
       const defaultValue = getDefaultValue(attribute.id);
       return (
-        <BasicAttributeRow label={attribute.label}>
+        <BasicAttributeRow
+          label={attribute.label}
+          description={intl.formatMessage(inputTypeMessages.richText)}
+        >
           {getShouldMount(attribute.id) && (
             <RichTextEditor
               defaultValue={defaultValue}

src/components/Attributes/BasicAttributeRow.tsx

@@ -1,51 +1,25 @@
 import { Typography } from "@material-ui/core";
+import HelpOutline from "@material-ui/icons/HelpOutline";
 import Grid from "@saleor/components/Grid";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(
+import { useBasicAttributeStyles } from "./styles";
-  theme => ({
-    attributeSection: {
-      "&:last-of-type": {
-        paddingBottom: 0,
-      },
-      padding: theme.spacing(2, 0),
-      wordBreak: "break-word",
-    },
-    attributeSectionLabel: {
-      alignItems: "center",
-      display: "flex",
-    },
-    flex: {
-      columnGap: theme.spacing(2) + "px",
-      display: "flex",
-      flexDirection: "row",
-      [theme.breakpoints.down("md")]: {
-        flexDirection: "column",
-        rowGap: theme.spacing(2) + "px",
-      },
-    },
-    value: {
-      "&&": {
-        overflow: "visible",
-      },
-    },
-  }),
-  { name: "BasicAttributeRow" },
-);
 
 interface BasicAttributeRowProps {
   label: string | React.ReactNode;
+  description?: string | React.ReactNode;
   flexValueContainer?: boolean;
 }
 
 const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
   label,
+  description,
   children,
   flexValueContainer,
 }) => {
-  const classes = useStyles();
+  const classes = useBasicAttributeStyles();
 
   return (
     <Grid className={classes.attributeSection} variant="uniform">
@@ -53,7 +27,14 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
         className={classes.attributeSectionLabel}
         data-test-id="attribute-label"
       >
-        <Typography>{label}</Typography>
+        <Typography>
+          {label}
+          {description && (
+            <Tooltip title={description}>
+              <HelpOutline className={classes.tooltipIcon} />
+            </Tooltip>
+          )}
+        </Typography>
       </div>
       <div
         data-test-id="attribute-value"

src/components/Attributes/ExtendedAttributeRow.tsx

@@ -1,27 +1,9 @@
 import { Typography } from "@material-ui/core";
 import { Button } from "@saleor/components/Button";
 import Grid from "@saleor/components/Grid";
-import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
-const useStyles = makeStyles(
+import { useExtendedAttributeStyles } from "./styles";
-  theme => ({
-    attributeSection: {
-      "&:last-of-type": {
-        paddingBottom: 0,
-      },
-      padding: theme.spacing(2, 0),
-    },
-    attributeSectionButton: {
-      float: "right",
-    },
-    attributeSectionLabel: {
-      alignItems: "center",
-      display: "flex",
-    },
-  }),
-  { name: "ExtendedAttributeRow" },
-);
 
 interface ExtendedAttributeRowProps {
   label: string;
@@ -32,7 +14,7 @@ interface ExtendedAttributeRowProps {
 
 const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
   const { label, selectLabel, disabled, onSelect, children } = props;
-  const classes = useStyles(props);
+  const classes = useExtendedAttributeStyles(props);
 
   return (
     <>

src/components/Attributes/styles.ts

@@ -23,3 +23,63 @@ export const useStyles = makeStyles(
   }),
   { name: "AttributeRow" },
 );
+
+export const useBasicAttributeStyles = makeStyles(
+  theme => ({
+    attributeSection: {
+      "&:last-of-type": {
+        paddingBottom: 0,
+      },
+      padding: theme.spacing(2, 0),
+      wordBreak: "break-word",
+    },
+    attributeSectionLabel: {
+      alignItems: "center",
+      display: "flex",
+    },
+    flex: {
+      columnGap: theme.spacing(2) + "px",
+      display: "flex",
+      flexDirection: "row",
+      [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+        rowGap: theme.spacing(2) + "px",
+      },
+    },
+    value: {
+      "&&": {
+        overflow: "visible",
+      },
+    },
+    tooltipIcon: {
+      fill: theme.palette.type === "dark" ? "#FAFAFA" : "#28234A",
+      fillOpacity: 0.6,
+      "&:hover": {
+        fillOpacity: 1,
+      },
+      position: "absolute",
+      padding: theme.spacing(0.25),
+      marginLeft: theme.spacing(0.75),
+    },
+  }),
+  { name: "BasicAttributeRow" },
+);
+
+export const useExtendedAttributeStyles = makeStyles(
+  theme => ({
+    attributeSection: {
+      "&:last-of-type": {
+        paddingBottom: 0,
+      },
+      padding: theme.spacing(2, 0),
+    },
+    attributeSectionButton: {
+      float: "right",
+    },
+    attributeSectionLabel: {
+      alignItems: "center",
+      display: "flex",
+    },
+  }),
+  { name: "ExtendedAttributeRow" },
+);

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -357,6 +357,16 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Plain Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div
@@ -411,6 +421,16 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Rich Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div
@@ -1131,6 +1151,16 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Plain Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div
@@ -1186,6 +1216,16 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Rich Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div
@@ -2142,6 +2182,16 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Plain Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div
@@ -2197,6 +2247,16 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
             class="MuiTypography-root-id MuiTypography-body1-id"
           >
             Rich Text Attribute
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+              />
+            </svg>
           </div>
         </div>
         <div