djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add format tip for text attribute rows (#2340)

Browse source 
* Add format tip for text attribute rows

* Update changelog with added attribute tip

* Update attributes test snapshots

* Update question-help icons for dark mode
This commit is contained in:
Dawid 2022-10-13 12:41:26 +02:00 committed by GitHub
parent 943b96436c
commit be76836e12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 147 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -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

2
src/channels/components/ChannelAllocationStrategy/styles.ts
View file

@ -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,

11
src/components/Attributes/AttributeRow.tsx
View file

@ -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}

47
src/components/Attributes/BasicAttributeRow.tsx
View file

@ -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(
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" },
);
import { useBasicAttributeStyles } from "./styles";
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"

22
src/components/Attributes/ExtendedAttributeRow.tsx
View file

@ -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(
theme => ({
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<ExtendedAttributeRowProps> = props => {
const { label, selectLabel, disabled, onSelect, children } = props;
const classes = useStyles(props);
const classes = useExtendedAttributeStyles(props);
return (
<>

60
src/components/Attributes/styles.ts
View file

@ -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" },
);

60
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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