feat: Editor styles and layout update #2491

ianjon3s · 2023-11-28T16:28:24Z

What does this PR do?

Two main areas of work addressed:

1. Adding admin setting design feature UI

UI has been added for the following (UI only, no working functionality at present).

Theme colour with colour picker
Logo with file upload
Favicon with file upload

Note: I've added example links to guides for each of these elements. I'll make sure these are in place on our PlanX Notion before the work goes live.

As part of this I have created the EditorRow UI component with optional background variant, to be used for each row of settings.

As guided by @jessicamcinchak this sits behind the feature flag window.featureFlags.toggle("SHOW_TEAM_SETTINGS")

Preview:
https://2491.planx.pizza/buckinghamshire/find-out-if-you-need-planning-permission/settings/design

2. Updating general editor UI

Interwoven with and as an extension of the above, I've given the editor UI a going over with a focus on the following:

Unifying input styles, sizes, backgrounds, borders, placeholder text
Addressing issues with input layout, particularly layout shift when entering content
Unifying focus styles (lots more potential quick-wins from an accessibility POV, but this is a good start)
Unifying label and subtitle styles

Preview:
https://2491.planx.pizza/opensystemslab/permitteddevelopment,7GeYLgmnm9/nodes/i0uhcaViKg/nodes/CtyInx9nSU/edit

github-actions · 2023-11-28T16:54:24Z

Removed vultr server and associated DNS entries

jessicamcinchak · 2023-11-29T10:02:02Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx

-        </Box>
-      </Box>
-    </>
+      </EditorRow>


Since we're planning to do a dev pass-off of this settings panel, this might be a good scenario for a feature flag!

To feature flag this new design panel:

You could add a new flag value to AVAILABLE_FEATURE_FLAGS like "SHOW_TEAM_SETTINGS" in src/lib/featureFlags.ts

Then in this file you could call hasFeatureFlag("SHOW_TEAM_SETTINGS") to conditionally render either the original "Feature in development" placeholder or the new form inputs here

Does that make sense? Will make it much easier to merge design changes and then pick up dev work in separate PRs without risking confusion of any curious editors in the meantime. To test, you can run window.featureFlags.toggle("SHOW_TEAM_SETTINGS") in the console

Yes absolutely, makes a lot more sense than extracting into separate PRs, I'll work to get this into this PR.

DafyddLlyr

Looks fantastic, honestly a huge improvement 🎉

A few very minor comments, happy for this to be merged as is and they can be picked up as small follow on PRs - whatever works best for you 👍

DafyddLlyr · 2023-11-30T11:38:46Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx

+                should be 32x32px and in .ico or .png format.
+              </InputDescription>
+              <InputDescription>
+                <Link href="https://www.planx.uk">


When these get updated we'll also want a target="_blank" attribute so they open in a new tab 👍

DafyddLlyr · 2023-11-30T11:41:48Z

editor.planx.uk/src/ui/EditorRow.tsx

A potential follow on task (in another PR!) might be splitting this /ui folder into /public, /editor and /shared subfolders.

At the moment the list is pretty big and knowing what components are available and used can be a bit of a challenge!

DafyddLlyr · 2023-11-30T11:46:14Z

editor.planx.uk/src/ui/InputDescription.tsx

+export default function InputDescription({
+  children,
+}: {
+  children: ReactNode;
+}) {


nit: This could be slightly simplified by using the PropsWithChildren type.

We can annotate the component with something like React.FC<PropsWithChildren> and it will handle some of this boilerplate for us. There should be a few examples of this in the codebase you can take a look at 👍

DafyddLlyr · 2023-11-30T11:50:45Z

editor.planx.uk/src/ui/ModalSectionContent.tsx

  paddingBottom: theme.spacing(2),
-}));
+})) as typeof Typography;


nit: I believe that the as typeof Typography is redundant here (and below in Subtitle). This is only needed when we're using another component type - i.e. passing a prop like component="legend" into the template.

DafyddLlyr · 2023-11-30T11:53:19Z

editor.planx.uk/src/ui/ModalSubtitle.tsx

 }));

 export const ModalSubtitle: React.FC<Props> = ({ title }) => (
  <Root sx={{ display: "flex" }}>
-    <StyledTypography variant="body2">{title}</StyledTypography>
+    <StyledTypography variant="subtitle2">{title}</StyledTypography>


This totally doesn't need to change, but just a heads up that you can feel free to use the sx prop (or even just p={something}) when you only have a few style attributes to add to a component.

No hard and fast rules here at all, it's usually nice to abstract style away from structure, but it can be a useful / quick method.

Docs: https://mui.com/system/getting-started/the-sx-prop/

DafyddLlyr · 2023-11-30T11:54:53Z

editor.planx.uk/src/ui/RichTextInput.css

Follow on comment from this morning - in another PR (no rush!) it would be nice to tidy this up and move these styles into a React styled component if possible.

I suspect that ProseMirror (the library used for rich text editing) is looking for these specific class names so it should be a fairly easy port across.

ianjon3s · 2023-11-30T12:05:27Z

Much appreciated @DafyddLlyr , I'll merge this now to avoid blocking further editor work, and break down the separate tasks as PRs as you suggest.

ianjon3s changed the title ~~Ian/editor design settings update~~ feat: Editor styles and layout update Nov 28, 2023

ianjon3s added 5 commits November 28, 2023 17:06

feat: Editor design settings

c04ab3c

feat: Editor design settings

e243ede

feat: Theme for editor settings

3622db0

feat: Editor styles and layout update

e31971d

feat: Styles for option buttons

18ff5f2

ianjon3s force-pushed the ian/editor-design-settings-update branch from 775e0df to 18ff5f2 Compare November 28, 2023 17:08

jessicamcinchak reviewed Nov 29, 2023

View reviewed changes

ianjon3s added 4 commits November 29, 2023 12:45

feat: Styles for data fields

856f297

feat: Add feature flag for design settings

357f47f

refactor: Input caption to input description

e58c6c9

fix: Repeated ID

4f0d2d9

ianjon3s requested a review from a team November 29, 2023 16:50

ianjon3s marked this pull request as ready for review November 29, 2023 16:50

DafyddLlyr approved these changes Nov 30, 2023

View reviewed changes

ianjon3s merged commit ce69253 into main Nov 30, 2023
12 checks passed

DafyddLlyr deleted the ian/editor-design-settings-update branch November 30, 2023 12:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Editor styles and layout update #2491

feat: Editor styles and layout update #2491

ianjon3s commented Nov 28, 2023 •

edited

Loading

github-actions bot commented Nov 28, 2023 •

edited

Loading

jessicamcinchak Nov 29, 2023

ianjon3s Nov 29, 2023

DafyddLlyr left a comment

DafyddLlyr Nov 30, 2023

DafyddLlyr Nov 30, 2023

DafyddLlyr Nov 30, 2023

DafyddLlyr Nov 30, 2023

DafyddLlyr Nov 30, 2023

DafyddLlyr Nov 30, 2023

ianjon3s commented Nov 30, 2023

feat: Editor styles and layout update #2491

feat: Editor styles and layout update #2491

Conversation

ianjon3s commented Nov 28, 2023 • edited Loading

What does this PR do?

1. Adding admin setting design feature UI

2. Updating general editor UI

github-actions bot commented Nov 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DafyddLlyr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ianjon3s commented Nov 30, 2023

ianjon3s commented Nov 28, 2023 •

edited

Loading

github-actions bot commented Nov 28, 2023 •

edited

Loading