diff --git a/CHANGELOG.md b/CHANGELOG.md index e4329c6da..be2446273 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/channels/components/ChannelAllocationStrategy/styles.ts b/src/channels/components/ChannelAllocationStrategy/styles.ts index 700ed885c..3d2809277 100644 --- a/src/channels/components/ChannelAllocationStrategy/styles.ts +++ b/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, diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx index d277f6277..ded299be4 100644 --- a/src/components/Attributes/AttributeRow.tsx +++ b/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 = ({ ); case AttributeInputTypeEnum.PLAIN_TEXT: return ( - + = ({ } = richTextGetters; const defaultValue = getDefaultValue(attribute.id); return ( - + {getShouldMount(attribute.id) && ( ({ - 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" }, -); +import { useBasicAttributeStyles } from "./styles"; interface BasicAttributeRowProps { label: string | React.ReactNode; + description?: string | React.ReactNode; flexValueContainer?: boolean; } const BasicAttributeRow: React.FC = ({ label, + description, children, flexValueContainer, }) => { - const classes = useStyles(); + const classes = useBasicAttributeStyles(); return ( @@ -53,7 +27,14 @@ const BasicAttributeRow: React.FC = ({ className={classes.attributeSectionLabel} data-test-id="attribute-label" > - {label} + + {label} + {description && ( + + + + )} +
({ - attributeSection: { - "&:last-of-type": { - paddingBottom: 0, - }, - padding: theme.spacing(2, 0), - }, - attributeSectionButton: { - float: "right", - }, - attributeSectionLabel: { - alignItems: "center", - display: "flex", - }, - }), - { name: "ExtendedAttributeRow" }, -); +import { useExtendedAttributeStyles } from "./styles"; interface ExtendedAttributeRowProps { label: string; @@ -32,7 +14,7 @@ interface ExtendedAttributeRowProps { const ExtendedAttributeRow: React.FC = props => { const { label, selectLabel, disabled, onSelect, children } = props; - const classes = useStyles(props); + const classes = useExtendedAttributeStyles(props); return ( <> diff --git a/src/components/Attributes/styles.ts b/src/components/Attributes/styles.ts index c8e915da8..06e64957b 100644 --- a/src/components/Attributes/styles.ts +++ b/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" }, +); diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index c84df2310..3da1f24b4 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/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 +
Rich Text Attribute +
Plain Text Attribute +
Rich Text Attribute +
Plain Text Attribute +
Rich Text Attribute +