From 012eff9e1f8928e9ce0691b20e3a252a573b0861 Mon Sep 17 00:00:00 2001 From: Paul-Joel Date: Tue, 1 Nov 2022 15:04:43 +0000 Subject: [PATCH 1/2] Change white-space: pre to pre-wrap throughout. Fix spotted bug with warning panel --- .../src/App/introduction/Preview/IntroductionPreview/index.js | 2 +- eq-author/src/App/page/Preview/CalculatedSummaryPreview.js | 2 +- eq-author/src/App/page/Preview/ListCollectorPagePreview.js | 2 +- eq-author/src/App/page/Preview/QuestionPagePreview.js | 2 +- eq-author/src/App/questionConfirmation/Preview/index.js | 2 +- eq-author/src/App/section/Preview/SectionIntroPreview.js | 2 +- eq-author/src/components-themed/panels/panel.js | 4 ++-- eq-author/src/components/Forms/Tooltip/index.js | 2 +- .../src/components/RichTextEditor/entities/PipedValue.js | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js b/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js index ec7ae4da99..89ba12951c 100644 --- a/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js +++ b/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js @@ -32,7 +32,7 @@ const Container = styled.div` background-color: #e0e0e0; padding: 0 0.125em; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; } `; diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 1e4902acd6..05b28fd322 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -33,7 +33,7 @@ const Container = styled.div` background-color: #e0e0e0; padding: 0 0.125em; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; } `; diff --git a/eq-author/src/App/page/Preview/ListCollectorPagePreview.js b/eq-author/src/App/page/Preview/ListCollectorPagePreview.js index 14d6111c66..fd95a6b27d 100644 --- a/eq-author/src/App/page/Preview/ListCollectorPagePreview.js +++ b/eq-author/src/App/page/Preview/ListCollectorPagePreview.js @@ -42,7 +42,7 @@ const Container = styled.div` background-color: #e0e0e0; padding: 0 0.125em; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; } `; diff --git a/eq-author/src/App/page/Preview/QuestionPagePreview.js b/eq-author/src/App/page/Preview/QuestionPagePreview.js index 6c01ac47e0..4a078e8dc2 100644 --- a/eq-author/src/App/page/Preview/QuestionPagePreview.js +++ b/eq-author/src/App/page/Preview/QuestionPagePreview.js @@ -36,7 +36,7 @@ const Container = styled.div` background-color: #e0e0e0; padding: 0 0.125em; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; } `; diff --git a/eq-author/src/App/questionConfirmation/Preview/index.js b/eq-author/src/App/questionConfirmation/Preview/index.js index 5c20e08125..87b986557e 100644 --- a/eq-author/src/App/questionConfirmation/Preview/index.js +++ b/eq-author/src/App/questionConfirmation/Preview/index.js @@ -40,7 +40,7 @@ const Container = styled.div` span[data-piped] { background-color: #5f7682; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; color: white; padding: 0.1em 0.4em 0.2em; } diff --git a/eq-author/src/App/section/Preview/SectionIntroPreview.js b/eq-author/src/App/section/Preview/SectionIntroPreview.js index e3cefb69b0..67bb401b56 100644 --- a/eq-author/src/App/section/Preview/SectionIntroPreview.js +++ b/eq-author/src/App/section/Preview/SectionIntroPreview.js @@ -24,7 +24,7 @@ const Wrapper = styled.div` background-color: #e0e0e0; padding: 0 0.125em; border-radius: 4px; - white-space: pre; + white-space: pre-wrap; } `; diff --git a/eq-author/src/components-themed/panels/panel.js b/eq-author/src/components-themed/panels/panel.js index d0e120b4b3..c2203f36db 100644 --- a/eq-author/src/components-themed/panels/panel.js +++ b/eq-author/src/components-themed/panels/panel.js @@ -58,7 +58,7 @@ const successPanel = css` const Flex = styled.div` display: flex; justify-content: start; - align-items: center; + align-items: start; font-weight: ${({ bold }) => bold && "bold"}; font-size: ${({ fontSize }) => fontSize}; `; @@ -180,7 +180,7 @@ const Panel = ({ {variant === "warning" && ( ! - {children} +
{children}
 )} diff --git a/eq-author/src/components/Forms/Tooltip/index.js b/eq-author/src/components/Forms/Tooltip/index.js index ef7f6577b6..337c8d2d22 100644 --- a/eq-author/src/components/Forms/Tooltip/index.js +++ b/eq-author/src/components/Forms/Tooltip/index.js @@ -12,7 +12,7 @@ const StyledTooltip = styled(ReactTooltip)` line-height: 1 !important; padding: 0.4rem 0.6rem !important; border-radius: ${radius} !important; - white-space: pre; + white-space: pre-wrap; `; class Tooltip extends React.Component { diff --git a/eq-author/src/components/RichTextEditor/entities/PipedValue.js b/eq-author/src/components/RichTextEditor/entities/PipedValue.js index 2786edb376..e7c1cc7579 100644 --- a/eq-author/src/components/RichTextEditor/entities/PipedValue.js +++ b/eq-author/src/components/RichTextEditor/entities/PipedValue.js @@ -19,7 +19,7 @@ const PipedValueDecorator = styled.span` background-color: #e0e0e0; padding: 0 0.125em; border-radius: ${radius}; - white-space: pre; + white-space: pre-wrap; `; const PipedValueSerialized = ({ data: { id, text, pipingType, type } }) => ( From e6bfe5f323a698a3a40e48902ffcb8c4d73cd813 Mon Sep 17 00:00:00 2001 From: Paul-Joel Date: Tue, 1 Nov 2022 15:08:17 +0000 Subject: [PATCH 2/2] Update to snapshots --- .../__snapshots__/RichTextEditor.test.js.snap | 24 +++++++++---------- .../__snapshots__/PipedValue.test.js.snap | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap b/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap index 58f55c17f0..2355b38d6b 100644 --- a/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap +++ b/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap @@ -87,7 +87,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -172,7 +172,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -251,7 +251,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -416,7 +416,7 @@ exports[`components/RichTextEditor should render 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -501,7 +501,7 @@ exports[`components/RichTextEditor should render 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -580,7 +580,7 @@ exports[`components/RichTextEditor should render 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -796,7 +796,7 @@ exports[`components/RichTextEditor should render existing content 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -889,7 +889,7 @@ exports[`components/RichTextEditor should render existing content 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -1017,7 +1017,7 @@ exports[`components/RichTextEditor should render existing content 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -1184,7 +1184,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -1269,7 +1269,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", @@ -1348,7 +1348,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator", diff --git a/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap b/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap index 69ecb4798e..aeb1fcfecd 100644 --- a/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap +++ b/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap @@ -12,7 +12,7 @@ exports[`PipedValue decorator should render piped value entities 1`] = ` "rules": Array [ "background-color:#e0e0e0;padding:0 0.125em;border-radius:", "4px", - ";white-space:pre;", + ";white-space:pre-wrap;", ], }, "displayName": "PipedValue__PipedValueDecorator",