From aac6924dac62db5d9df6d400aad10a4e949dde65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Mon, 7 Oct 2024 09:39:34 +0100 Subject: [PATCH 1/3] chore: Fix React `:nth-child` warnings --- editor.planx.uk/src/@planx/components/Content/Public.tsx | 2 +- editor.planx.uk/src/pages/FlowEditor/floweditor.scss | 6 +++--- editor.planx.uk/src/ui/editor/RichTextInput.tsx | 9 --------- editor.planx.uk/src/ui/shared/InputRow.tsx | 2 +- editor.planx.uk/src/ui/shared/InputRowLabel.tsx | 3 --- 5 files changed, 5 insertions(+), 17 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Content/Public.tsx b/editor.planx.uk/src/@planx/components/Content/Public.tsx index 7c8584c09e..d8232f954a 100644 --- a/editor.planx.uk/src/@planx/components/Content/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Content/Public.tsx @@ -30,7 +30,7 @@ const Content = styled(Box, { "& a": { color: getContrastTextColor(color || "#fff", theme.palette.link.main), }, - "& *:nth-child(1)": { + "& *:nth-of-type(1)": { marginTop: 0, }, })); diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss index 8f51ad279b..666f85f63a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss +++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss @@ -168,7 +168,7 @@ $fontMonospace: "Source Code Pro", monospace; opacity: 0.6; } - > span:not(:nth-child(1)) { + > span:not(:first-child) { margin-left: 6px; } } @@ -476,7 +476,7 @@ $fontMonospace: "Source Code Pro", monospace; $lineWidth; background-repeat: no-repeat, repeat-x, repeat-x; - &:nth-child(1) { + &:nth-of-type(1) { background-position: top center, top right, @@ -516,7 +516,7 @@ $fontMonospace: "Source Code Pro", monospace; $lineWidth 100%, 2px 100%; - &:nth-child(1) { + &:nth-of-type(1) { background-position: left center, left bottom, diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx index c455cad5c4..aaa2f1e2fa 100644 --- a/editor.planx.uk/src/ui/editor/RichTextInput.tsx +++ b/editor.planx.uk/src/ui/editor/RichTextInput.tsx @@ -96,15 +96,6 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({ fontWeight: "inherit", }, }, - // Styles for placeholder text, to match ui/Input.tsx - "& p.is-editor-empty:nth-child(1)::before": { - color: theme.palette.text.placeholder, - opacity: 1, - content: `attr(data-placeholder)`, - float: "left", - height: 0, - pointerEvents: "none", - }, // Focus styles "&.ProseMirror-focused": { ...inputFocusStyle, diff --git a/editor.planx.uk/src/ui/shared/InputRow.tsx b/editor.planx.uk/src/ui/shared/InputRow.tsx index ff8eab5798..0c4f5798f3 100644 --- a/editor.planx.uk/src/ui/shared/InputRow.tsx +++ b/editor.planx.uk/src/ui/shared/InputRow.tsx @@ -13,7 +13,7 @@ const Root = styled(Box, { "& > *": { flexGrow: 1, marginRight: 5, - "&:nth-child(1)": { + "&:first:child": { marginLeft: 0, }, "&:last-child": { diff --git a/editor.planx.uk/src/ui/shared/InputRowLabel.tsx b/editor.planx.uk/src/ui/shared/InputRowLabel.tsx index f8799618ba..e69634e424 100644 --- a/editor.planx.uk/src/ui/shared/InputRowLabel.tsx +++ b/editor.planx.uk/src/ui/shared/InputRowLabel.tsx @@ -7,9 +7,6 @@ const Label = styled(Typography)(({ theme }) => ({ flexGrow: 0, paddingRight: theme.spacing(2), alignSelf: "center", - "&:not(:nth-child(1))": { - paddingLeft: theme.spacing(2), - }, })) as typeof Typography; export default function InputRowLabel({ children }: { children: ReactNode }) { From 3af7314735349a77a817510f4d41a79653faa482 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Mon, 7 Oct 2024 17:35:53 +0100 Subject: [PATCH 2/3] fix: Display placeholder in RichTextInput --- editor.planx.uk/src/ui/editor/RichTextInput.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx index aaa2f1e2fa..4ffd484d13 100644 --- a/editor.planx.uk/src/ui/editor/RichTextInput.tsx +++ b/editor.planx.uk/src/ui/editor/RichTextInput.tsx @@ -96,6 +96,16 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({ fontWeight: "inherit", }, }, + // Styles for placeholder text, to match ui/Input.tsx + // "& p.is-editor-empty:nth-child(1)::before": { + "& p.is-editor-empty:first-child::before": { + color: theme.palette.text.placeholder, + opacity: 1, + content: `attr(data-placeholder)`, + float: "left", + height: 0, + pointerEvents: "none", + }, // Focus styles "&.ProseMirror-focused": { ...inputFocusStyle, From a0b896b7a8f4ed5ba109feefd12a8e3ea5126bce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 8 Oct 2024 09:59:50 +0100 Subject: [PATCH 3/3] fix: Remove commented out line --- editor.planx.uk/src/ui/editor/RichTextInput.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx index 4ffd484d13..5b8d4312f6 100644 --- a/editor.planx.uk/src/ui/editor/RichTextInput.tsx +++ b/editor.planx.uk/src/ui/editor/RichTextInput.tsx @@ -97,7 +97,6 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({ }, }, // Styles for placeholder text, to match ui/Input.tsx - // "& p.is-editor-empty:nth-child(1)::before": { "& p.is-editor-empty:first-child::before": { color: theme.palette.text.placeholder, opacity: 1,