Enable the project bar in the web component #799

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

@@ -227,6 +227,7 @@ i18n
            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

@@ -23,7 +23,7 @@
  .context-menu__item {
    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

sra405 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
8 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable the project bar in the web component #799

Enable the project bar in the web component #799

create-issue-branch bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Dec 1, 2023

PetarSimonovic Dec 1, 2023

sra405 Dec 1, 2023

PetarSimonovic Dec 1, 2023

sra405 Dec 1, 2023

PetarSimonovic Dec 1, 2023

sra405 Dec 1, 2023

sra405 Dec 1, 2023

PetarSimonovic Dec 1, 2023

github-actions bot commented Dec 4, 2023

github-actions bot commented Dec 4, 2023

PetarSimonovic left a comment

PetarSimonovic Dec 4, 2023

sra405 Dec 5, 2023

sra405 Dec 6, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

PetarSimonovic left a comment

PetarSimonovic Dec 5, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 11, 2023

PetarSimonovic left a comment

Enable the project bar in the web component #799

Enable the project bar in the web component #799

Conversation

create-issue-branch bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Dec 1, 2023

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

Choose a reason for hiding this comment

github-actions bot commented Dec 4, 2023

github-actions bot commented Dec 4, 2023

PetarSimonovic 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

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

PetarSimonovic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 11, 2023

PetarSimonovic left a comment

Choose a reason for hiding this comment