Enable the project bar in the web component by create-issue-branch[bot] · Pull Request #799 · RaspberryPiFoundation/editor-ui

create-issue-branch · 2023-11-29T14:25:25Z

closes #775

github-actions · 2023-11-29T14:27:50Z

Github Run 7033977369
Test coverage: 85%

github-actions · 2023-11-29T14:27:55Z

Github Run 7033976919
Test coverage: 85%

…project bar

github-actions · 2023-11-29T17:04:36Z

Github Run 7035960616
Test coverage: 85%

github-actions · 2023-11-30T13:23:04Z

Github Run 7047078701
Test coverage: 85%

…_project_bar_in_the_web_component

github-actions · 2023-11-30T16:13:49Z

Github Run 7049169270
Test coverage: 85%

github-actions · 2023-11-30T19:30:34Z

Github Run 7051327900
Test coverage: 85%

github-actions · 2023-11-30T19:41:53Z

Github Run 7051439022
Test coverage: 85%

…ithProjectbar prop

github-actions · 2023-11-30T20:10:07Z

Github Run 7051697387
Test coverage: 85%

github-actions · 2023-12-01T08:07:25Z

Github Run 7057370562
Test coverage: 85%

PetarSimonovic · 2023-12-01T08:56:09Z

src/components/ProjectBar/ProjectBar.jsx

              <DownloadButton
                buttonText={t("header.download")}
-                className="project-bar__btn btn--download"
+                className="btn btn--tertiary project-bar__btn"
                Icon={DownloadIcon}
                type="tertiary"
              />
            </div>


Think we need to change DesignSystemButton.scss to set the correct svg fill on rpf-primary-button:

Changing rpf-text-primary to rpf-button-primary-text-color seems to work

I think I'm there with it now but it took a while longer than I thought + I went deeper than expected too 😅

PetarSimonovic · 2023-12-01T09:51:21Z

src/components/SaveButton/SaveButton.jsx

+        })}
        onClick={onClickSave}
-        text={t("header.save")}
+        text={t(webComponent ? "header.integratedSave" : "header.save")}


The header.integratedSave text is "Log in to save project" but I don't think the button triggers a log in.

If the user is logged in, should the text change to "Save"?

Could the ProjectBar render a LogIn button with the log in prompt if there's no user, and render the SaveButton only once a user has logged in?

Very good point. I'm not sure I'm a massive fan of moving away from "Save" anyway and it adds a fair bit of complexity to it. I'm not 100% convinced I'd be able to easily toggle this when its integrated 🤔

PetarSimonovic · 2023-12-01T09:53:33Z

src/components/WebComponentProject/WebComponentProject.test.js

+    expect(screen.queryByText("header.newProject")).toBeInTheDocument();
+  });
+});
+


Should we add a test to check that the project name is readOnly in the WebComponent?

yep, good call 👍

added them in ProjectName

PetarSimonovic · 2023-12-01T09:54:23Z

src/utils/i18n.js

            renameProject: "Edit project name",
            renameSave: "Save project name",
            save: "Save",
+            integratedSave: "Log in to save project",


I think the SaveButton will display this text even when the user is logged in.

…_component

github-actions · 2023-12-04T14:28:44Z

Github Run 7088003521
Test coverage: 85%

github-actions · 2023-12-04T14:29:05Z

Github Run 7088008934
Test coverage: 85%

PetarSimonovic

Looks great Scott! Just noticed a couple of things on the file buttons

PetarSimonovic · 2023-12-04T16:13:25Z

src/components/Menus/Sidebar/FilePanel/FilePanel.jsx

+            text={`${file.name}.${file.extension}`}
+            icon={<FileIcon ext={file.extension} />}
+            type="tertiary"
+            textAlways


Looks like there might be some styling tweaks needed for the tertiary button/files-list-items

Projects

I don't think the button on Projects is receiving the .files-list-item styles. When I moved FilePanel.scss to the end of InternalStyles.scss it seemed to work, so perhaps it's something to do with the hierarchy in that doc

Standalone dark mode

This has a slightly different shade on the border. I think the issue might be with --rpf-files-list-item-hover

First one there seems to be a conflict with the classnames applied to the button between btn from Button.scss and files-list-item in FilePanel.scss. I've applied the fix you suggested and added a note. Good find!

This second ones a pain 😅

it feels a little hacky with the !important's but other than reverting the buttons and sorting out theming again in 2 separate places it feels like the best approach for now

…_component

github-actions · 2023-12-05T09:15:07Z

Github Run 7098544919
Test coverage: 85%

github-actions · 2023-12-05T13:32:31Z

Github Run 7101450093
Test coverage: 85%

…_component

github-actions · 2023-12-05T14:15:37Z

Github Run 7101956836
Test coverage: 85%

PetarSimonovic

One last comment Scott but looks great

PetarSimonovic · 2023-12-05T16:39:57Z

src/assets/stylesheets/ContextMenu.scss

    margin: 0;
    background-color: inherit;
-    color: inherit;
+    color: var(--rpf-button-secondary-text-color);


Think this change turns the text the same colour as the background. color: rpf-button-secondary-color looks like it might work. I think inherit might work on the border-color

…_component

github-actions · 2023-12-05T17:12:38Z

Github Run 7104153351
Test coverage: 85%

github-actions · 2023-12-05T17:24:44Z

Github Run 7104298878
Test coverage: 85%

…ode as a result on the inherit

github-actions · 2023-12-06T07:51:32Z

Github Run 7111645426
Test coverage: 85%

…_component

github-actions · 2023-12-11T09:10:28Z

Github Run 7165193497
Test coverage: 85%

PetarSimonovic

lgtm! 👍

Create draft PR for #775

ed1ca6f

create-issue-branch bot temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 29, 2023 14:25 Inactive

feat(ProjectBar): initial web-component changes to enable a readonly …

a4fbd68

…project bar

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 29, 2023 17:02 — with GitHub Actions Inactive

project bar web component styling

09a99bc

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 30, 2023 13:20 — with GitHub Actions Inactive

Scott added 2 commits November 30, 2023 16:11

SaveStatus for web-component styles

d90f848

Merge remote-tracking branch 'origin/main' into issues/775-Enable_the…

232ffd7

…_project_bar_in_the_web_component

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 30, 2023 16:11 — with GitHub Actions Inactive

SaveButton webcomponent state

269d10b

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 30, 2023 19:28 — with GitHub Actions Inactive

test(saveButton): additional tests due to more complex button logic

a6c6cb0

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 30, 2023 19:39 — with GitHub Actions Inactive

test(WebComponentProject): additional tests to check propogation of w…

2f6b1fe

…ithProjectbar prop

sra405 marked this pull request as ready for review November 30, 2023 20:07

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component November 30, 2023 20:07 — with GitHub Actions Inactive

changelog

cab0b95

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 1, 2023 08:05 — with GitHub Actions Inactive

PetarSimonovic reviewed Dec 1, 2023

View reviewed changes

button theme fixes

82b52f0

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 1, 2023 13:31 — with GitHub Actions Inactive

Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

c695239

…_component

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 4, 2023 14:27 — with GitHub Actions Inactive

PetarSimonovic reviewed Dec 4, 2023

View reviewed changes

Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

a2b3f83

…_component

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 5, 2023 09:12 — with GitHub Actions Inactive

PR review style comments

eec0580

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 5, 2023 13:30 — with GitHub Actions Inactive

Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

4304f7c

…_component

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 5, 2023 14:13 — with GitHub Actions Inactive

PetarSimonovic reviewed Dec 5, 2023

View reviewed changes

Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

3ed249f

…_component

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 5, 2023 17:10 — with GitHub Actions Inactive

fix contextmenu dark mode & focus-visible states

6501154

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 5, 2023 17:22 — with GitHub Actions Inactive

fix(react-tabs-tertiary-svg): close icon svg remained black in dark m…

01df28c

…ode as a result on the inherit

sra405 temporarily deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 6, 2023 07:49 — with GitHub Actions Inactive

Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

850b2de

…_component

sra405 deployed to previews/issues/775-Enable_the_project_bar_in_the_web_component December 11, 2023 09:08 — with GitHub Actions View deployment

PetarSimonovic approved these changes Dec 11, 2023

View reviewed changes

sra405 merged commit e9644d7 into main Dec 11, 2023

sra405 deleted the issues/775-Enable_the_project_bar_in_the_web_component branch December 11, 2023 11:51

Conversation

create-issue-branch bot commented Nov 29, 2023

Uh oh!

github-actions bot commented Nov 29, 2023

Uh oh!

github-actions bot commented Nov 29, 2023

Uh oh!

github-actions bot commented Nov 29, 2023

Uh oh!

github-actions bot commented Nov 30, 2023

Uh oh!

github-actions bot commented Nov 30, 2023

Uh oh!

github-actions bot commented Nov 30, 2023

Uh oh!

github-actions bot commented Nov 30, 2023

Uh oh!

github-actions bot commented Nov 30, 2023

Uh oh!

github-actions bot commented Dec 1, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 4, 2023

Uh oh!

github-actions bot commented Dec 4, 2023

Uh oh!

PetarSimonovic left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

PetarSimonovic left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

github-actions bot commented Dec 6, 2023

Uh oh!

github-actions bot commented Dec 11, 2023

Uh oh!

PetarSimonovic left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants